DOCSLIB.ORG

Modern HTML5 Development

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Modern HTML5 Development The Superhero’s Method of Modern HTML5 Development A RapidValue Solutions Whitepaper Contents HTML is more powerful and smart than ever before!........................................................................ 03 More tools ! More plugins !! More automations!!.............................................................................. 04 CSS Preprocessors........................................................................................................................ 05 1. Sprite images.................................................................................................................. 05 2. Susy............................................................................................................................... 05 Emmet......................................................................................................................................... 05 Scaffold with YO, build with Grunt, manage dependencies with Bower!.............................................. 06 1. Grunt............................................................................................................................. 06 2. Bower............................................................................................................................. 07 3. LiveReload...................................................................................................................... 07 4. Yeoman generators......................................................................................................... 07 Conclusion................................................................................................................................... 07 About RapidValue......................................................................................................................... 08 A Whitepaper by RapidValue Solutions - Aug 2014 02 HTML is more powerful and smart than ever before! There was a time, when we used to spend hours and hours, trying to fix the browser compatibility issues in our When everything around us UI. If problems persisted, we ended up cursing the gets smarter, its so hard for Internet Explorer at least once in a day. We were unable us to not be. to learn anything new, because nothing “new” could give a better browser support. Today, few years after the arrival of CSS3 and HTML5, things have changed for good. All the major browsers are stable and have started supporting all the essential prop- erties of CSS3 and HTML5. Things are getting more and more convenient, powerful, easy and user-friendly. A new era has started and with each passing day, the front-end developers are getting more and more enlight- ened. Yes! The developers are regarded as the ‘superhe- roes’. When everything around us is getting smarter and cooler, we cannot lag behind. The current scenario encourages you to become a front-end developer. HTML5 test score over the years 600 500 400 300 Score (points) Score 200 100 0 Jan 2009 Jan 2010 Jan 2011 Jan 2012 Jan 2013 Jan 2014 Chrome Firefox Internet Explorer Maxthon Opera Safari Source : html5test.com A Whitepaper by RapidValue Solutions - Aug 2014 0302 © RapidValue Solutions More tools ! More plugins !! More automations!! HTML5 developers have gone through many revolutions in the recent years. There has been an alarming rise in the number of innovations which has changed the notion of Being a front-end super hero who a front-end developer is and what all tasks he can is not so easy. You cannot do. just get bitten by a mutant A plethora of tools have emerged recently and have spider and start weaving the completely changed the life cycle of the HTML5 develop- web the very next morning. ment. We now have a large arsenal of tools, starting from boilerplates to performance tuning and building tools. This Its all about enables us to facilitate speed and allows us to develop in learn - practice - learn - a smarter and better way. practice and practice. Every successful front-end developer has these beneficial tools in their bag. The right usage and implementation of these tools have become critical and is considered to be becomes the superhero’s magical method of modern front-end workflow. A Whitepaper by RapidValue Solutions - Aug 2014 0402 © RapidValue Solutions CSS Preprocessors CSS isn’t that difficult to learn and its pretty easy to write, but maintenance of the CSS file has become an arduous task for the developers. The mainframe CSS preprocessor, SASS and a CSS Authoring Framework - Compass, enables writing and maintaining CSS in a much easy way as compared to the previous methods that were used. By creating cutting-edge cross browser, CSS, effort- lessly takes your style sheet to the next level, and beyond. The best part is, that you don’t need to possess knowledge like a scientist to use it. Sprite images Creating sprite images is quite challenging for all developers. Cutting the images, merging them into a single file, measuring their positions and recording that in your CSS, can be a strenuous task. This can add hours to a project and you may also need to redo it many times to get it right or in some cases, the project requirements get changed. What if someone could assist you with this? Yes, compass will do exactly that. All you need to do is to put all the images into a directory and add some basic instruc- tions. Compass will do the rest. Your work is done. Susy Susy is a Compass plugin that allows you to create a customizable grid system easily. It makes respon- sive design extremely effortless by avoiding the need to manually calculate widths. There is no need to limit the design according to the available frameworks to create responsive websites. Susy does the math for any markup, any design and any opinion. Emmet Previously known as Zen Coding, Emmet is a revolutionary editor plugin for high-speed HTML, XML, XSL and CSS coding and editing. Emmet has helped developers since many years and has now reached a new level. The core of this plugin is a powerful abbreviation engine which allows you to expand expres- sions, similar to CSS selectors, into HTML code. It will make your work seem like it has been carried out by an expert. div#page>div.logo+ul#navigation>li*3>a ...can be expanded into: <div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> A Whitepaper by RapidValue Solutions - Aug 2014 0502 © RapidValue Solutions Scaold with YO, build with Grunt, manage dependencies with Bower! With so many tools that are available for the front-end develop- ment, sometimes it is very difficult to figure out how these tools work together. The Yeoman workflow comprises three types of tools - the scaffolding tool (YO), the build tool (Grunt, Gulp, etc.) and the package manager (like Bower and npm) for improving your productivity and satisfaction when building a web application. Grunt Grunt is the most popular JavaScript task runner among the front-end developers. While working on a JavaScript project, there are a few things you will want to do on a regular basis. Like concatenation of the given files, running JSHint to detect errors and potential problems in your JavaScript code, running tests, or minifying and combining your scripts etc. As of now, Grunt has the following predefined tasks that you can use in your project: concat - Concatenate files init - Generate project scaffolding from a predefined template lint - Validate files with JSHint min - Minify files with UglifyJS qunit - Run QUnit unit tests in a headless PhantomJS instance server - Start a static web server test - Run unit tests with nodeunit watch - Run predefined tasks whenever watched files change In addition to the built-in tasks, you can create your own tasks. A Whitepaper by RapidValue Solutions - Aug 2014 050602 © RapidValue Solutions Bower Bower is a package manager for the web libraries. Previously when your project needed jQuery be included, you had to visit the jQuery website, download the file and move it into your project directory. Bower simplifies this process by typing bower install jquery which manages to get jQuery into your project. LiveReload LiveReload changes the way you develop. You, no longer have to save a file, switch to the browser, and then refresh the page. With LiveReload, after you save a file, the browser will refresh itself, saving your valuable and precious time. Using the dual monitor setup or a large monitor is pretty much a pre-requi- site. All you need to do is hit save and look. Yeoman generators There are quite a few Yeoman generators that are available for scaffold Web Apps (comes with SASS, Bootstrap, Modernizer, …), AngularJS apps, jQuery apps, Ember.js apps, Polymer and over 2000 more. Conclusion We are no longer completely dependent on the legacy browsers. We are taking initiatives to stretch further and develop everything that is possible with regards to the browser. By doing a lot of automation, you can avoid repeated mistakes, write in a clean and concise manner, and it becomes pretty easy to architect, maintain and extend the modular code. The life of an HTML5 developer is made pretty easy. To conclude, ‘learn-practice-learn-practice’ and prove to be beneficial to the customers. If you’d like more information on this topic, please do write to the author, Sujith Kumar K S, Senior. Front-end developer at [email protected] and our UX/UI Methodology & Design Expert, Melvin Thambi, Lead Architect - UX/UI Design at [email protected]
Load more

Recommended publications
  • Kaang: a Restful API Generator for the Modern Web
    Kaang: A RESTful API Generator for the Modern Web Ricardo Queirós CRACS & INESC-Porto LA & DI/ESMAD/P.PORTO, Porto, Portugal [email protected] https://orcid.org/0000-0002-1985-6285 Abstract Technology is constantly evolving, as a result, users have become more demanding and the ap- plications more complex. In the realm of Web development, JavaScript is growing in a surprising way, already leaving the boundaries of the browser, mainly due to the advent of Node.js. In fact, JavaScript is constantly being reinvented and, from the ES2015 version, began to include the OO concepts typically found in other programming languages. With Web access being mostly made by mobile devices, developers face now performance challenges and need to perform a plethora of tasks that weren’t necessary a decade ago, such as managing dependencies, bundling files, minifying code, optimizing images and others. Many of these tasks can be achieved by using the right tools for the job. However, developers not only have to know those tools, but they also must know how to access and operate them. This process can be tedious, confusing, time-consuming and error-prone. In this paper, we present Kaang, an automatic generator of RESTFul Web applications. The ultimate goal of Kaang is to minimize the impact of creating a RESTFul service by automating all its workflow (e.g., files structuring, boilerplate code generation, dependencies management, and task building). This kind of generators will benefit two types of users: will help novice developers to decrease their learning curve while facing the new frameworks and libraries commonly found in the modern Web and speed up the work of expert developers avoiding all the repetitive and bureaucratic work.
    [Show full text]
  • Front-End Tools and Workflows
    twitter.com/NikkitaFTW iamsaravieira.com [email protected] Editors Sublime Text 3 •Cross Platform •Multiple Selections •Completely Customisable •Package Control Package Control Amazing community behind it Atom •Built By Github •Completely built with web technologies •Node Integration •Hackable from top to bottom •Themes and Extensions by the team and community Brackets •Built by adobe •Inline Editors •Live Preview •Preprocessor support •Extract Extension that gets information from PSD files. Scaffolding & asset management tools NPM • Comes bundled with NodeJS • Package manager for Javascript • Manage Code dependencies • Download dependencies straight to your project or install them on your machine. • More than 100,000 packages on the registry. Bower npm install -g bower • Package manager for the web. • Optimised for front end by getting only one version of the required library of choice. • You can define the version of the package you want. Yeoman npm install -g yo •Combination of Yo , a build tool and a package manager • Yo scaffolds a new application adding all the tasks you need the build tool to do. •The build tool builds, previews and tests your project. •The package manager takes care of the dependencies in your project, Coding Languages SASS • CSS Preprocessor • Use variables in CSS • Mixins • Nesting • Import files without any addition HTTP requests CSS Preprocessors • LESS • Stylus • Myth • etc.. CoffeeScript npm install -g coffe-script • Easy on the eyes • String Interpolation • Readable Javascript Output Website Frameworks Bootstrap
    [Show full text]
  • Online Resume Builder Managing Network System for Internal and External Clients
    Rudy Website: http://www.rudylee.com Email: [email protected] Full-stack Web Developer Full-stack web developer with over 5 years of professional experience. Focus on sustainable web application architecture using PHP, Ruby on Rails, AngularJS, NodeJS, jQuery and responsive HTML/CSS. Experience RateCity JANUARY, 2015 TO PRESENT Ruby on Rails Developer Technologies & Tools Used Ruby on Rails, HTML5, PostgreSQL, jQuery, SASS, Git and Amazon AWS. Captiv8 MAY, 2012 TO DEC, 2014 Web Developer Technologies & Tools Used PHP, Ruby on Rails, HTML5, MySQL, PostgreSQL, jQuery, NodeJS, Grunt, SASS, AngularJS, Yeoman, Firebase, Git, Code Igniter, Zend Framework 2, CakePHP, Vagrant, Chef, Amazon AWS, C# and WPF. Responsibilities Design, development, test, documentation and deployment of content distribution system named Relay. Design and development online campaigns and facebook competition websites. Research on motion detection system using Kinect and WPF. Involved in server provisioning using Amazon AWS. BTA Active FEBRUARY 2011 TO Web Developer OCTOBER 2012 Technologies & Tools Used PHP, HTML5, MySQL, jQuery, Wordpress, Git, Simple Test, PHPUnit and CakePHP. Responsibilities Analysis, design, development and documentation of travel management system. Analysis, design, development and documentation of insurance investigation management system. Design and development client websites using Wordpress CMS. Applied Technology Laboratory Bina Nusantara University APRIL 2009 TO SEPTEMBER 2010 Network Administrator Technologies & Tools Used FreeBSD, Ubuntu, Centos, Mikrotik, Squid, Cisco, Joomla and Wordpress. Responsibilities Created Using Resumonk - Online Resume Builder Managing network system for internal and external clients. Research on new value added service such as online streaming, instant messanging and community website. Notable Bill Management System - CakePHP and Projects AngularJS SEPTEMBER, 2012 TO JANUARY, 2013 http://app.melwaniperdana.com Technologies & Tools Used CakePHP, MySQL, AngularJS, CoffeeScript and Git.
    [Show full text]
  • Judith Desire C
    Judith Desire c. (347) 994-8830 | [email protected] | redesigningtech.com | github.com/berryny | linkedin.com/in/jdesire WORK EXPERIENCE EXECUTIVE DIRECTOR | REDESIGNING TECHNOLOGY CORP. | New York, NY | MAR 2004 – PRESENT - Providing Front-End/Web Development for desktop browsers and mobile/tablet devices. - Establish and direct long term strategic goals, policies, and procedures - Determine systems needs with software and hardware to meet client’s business objectives. - Develop websites utilizing best practices for IA and GUI design - Assist clients with site tracking and analysis. 2016 Remote Front End Developer | Ruder Finn Inc. | New York, NY Projects: Nokia Technology, email templates Utilize hand-coding skills in HTML, JavaScript, jQuery, CSS/Sass, Bootstrap, and Photoshop to produce template webpages. Coding email newsletter templates for Apple Mail and MailChimp. 2015 Front End Developer | Tommy Hilfiger | New York, NY Projects: Tommy Blog Responsible for updating and maintaining blog template development on native mobile, tablet and desktop web pages using HTML and CSS. Interactive Developer | Droga5 | New York, NY Projects: No Ceilings (http://not-there.org/) Responsible for developing native mobile, tablet and desktop web design with responsiveness, fluid layout and fixed layouts landing page using HTML/HTML5, CSS2/CSS3, JS/jQuery and Bootstrap 3. 2013 - 2014 Consultant / Senior Web Developer | PSL Group | New York, NY Projects: Create template mobile applications Responsible for developing native mobile responsive design applications over the entire application lifecycle in HTML5, CSS3, jQuery, jQuery Mobile, jQuery UI, Require.js and javascript MVC. Consultant / Senior Web Developer | STEADY | New York, NY Projects: Nike Runner's Internal Content Management System (CMS) Coded the CMS in HTML, CSS, jQuery, CoffeeScript, Foundation 4, Angularjs, yeoman grunt bower services with multi-device user responsive design.
    [Show full text]
  • Iris-Panel Documentation Release 1
    iris-panel Documentation Release 1 lhh March 05, 2015 Contents 1 front-end Technical summary3 1.1 work flow tools..............................................3 1.2 Common Libraries............................................4 1.3 Templates.................................................5 2 Indices and tables 7 i ii iris-panel Documentation, Release 1 Contents: Contents 1 iris-panel Documentation, Release 1 2 Contents CHAPTER 1 front-end Technical summary here is tecnical summary about developing in front-end. 1.1 work flow tools we need to create a directory structure at the beginning of development, download library or framework and build dist directory when deploying the project. we choose the yeoman to do the above work. 1.1.1 yeoman yeoman is comprised of three tools: yo, bower, grunt. For installation and usage information, refer to yeoman. yo yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks and Bower dependencies that you might need for your build. Bower Bower is used for dependency management, so that you no longer have to manually download and manage your scripts. Grunt Grunt is used to build, preview and test your project, developer can customize design tasks to testing and build pack- ages. Tips here are small useful tips in developing with yeoman. • yo can help us set up directory of webapp, it can also generate directory of other development-patterns, like backbone, angular, express, etc. You can search generators by npm search yeoman-generator and install them. • bower not only can fetch library from github, but also can fetch a library from a specified path. like bower install ~/workspace/myPackage.
    [Show full text]
  • Compiling Sass to CSS with Gulp
    Table of Contents Introduction to Automation 1. Why don’t people automate 2. Your First Obstacle To Automation 3. Overview of a Web Development Workflow 4. Choosing Your Build Tool 5. Getting Started with Gulp 6. Structuring Your Project 7. Writing A Real Gulp Task The Development Phase 8. The Development Phase 9. Watching with Gulp 10. Live-reloading with Browser Sync 11. Wrapping Up the Samples Introduction to Automation Introduction to Automation 1 Why don’t people automate? Why don’t people automate Who doesn’t want to have a great workflow so they can get more done in a short span of time? Everyone wants to. The problem is most people don’t know where to start when building a great workflow. There’s a lot of information out there on the internet. You have to wade through documentations filled with technical jargon that doesn’t seem to make sense. You may also need to go through tons of tutorials that are either written for complete beginners, or assume you can decode long and gnarly JavaScript code immediately. Furthermore nobody seems to talk about putting a workflow together. You’re totally on your own when you try to piece the bits of information you collected together to make sense of what’s happening. If you do this alone, you’d have to spend weeks (or even months) to get to a decent workflow. The question is, do you have the luxury to spend so much time crafting your workflow? Most likely not. That’s why most people don’t automate their workflow.
    [Show full text]
  • Development of a Front-End Application Using Angularjs: 1UP Media Company Case
    Development of a front-end application using AngularJS: 1UP Media company case Dao, Vu 2016 Leppävaara Laurea University of Applied Sciences Leppävaara 2 Development of a front-end application using AngularJS: 1UP Media company case Vu Dao Degree Programme in BIT Bachelor’s Thesis December, 2016 3 Laurea University of Applied Sciences Abstract Leppävaara Business Information Technology Vu Dao Development of a front-end application using AngularJS: 1UP Media company case Year 2016 Pages 48 In this era of a data driven economy, customer behaviour data can be decisive for a business’s success as it allows optimisation to services and products. While big busi- nesses can afford an investment on expensive system to gather customer data, small and medium businesses find it difficult. Realising a potential market space, 1UP Me- dia Oy commissioned Lumi platform, a cloud based platform that is modularised, af- fordable and precise. The thesis starts by introducing the company and the project background. Then the thesis product with its objectives and requirements is described. The thesis frame- work, waterfall model, is used for it's straight-forward in execution and manage- ment. All concepts that the application is based on are explained, such as cloud computing, client-server, front-end application, and application framework. Addition- ally, it explains the design, implementation of the application and analyse testing result. The main objective of the product is an application that provides people counting data to the user as well as enables the user to manage resources and access to the data. Additionally, the application should be structured to allow extra data services which potentially would be developed later either by 1UP Media or third-party devel- opers.
    [Show full text]
  • Ionic-Framework
    ionic-framework #ionic- framework 1 1: ionic-framework 2 2 2 Examples 2 2 1. nonic ( ) Ionic Framework Cordova (Ionic Cordova ) 2 2. : 3 3. 3 3 Ionic Framework Hello World 5 Yo (Yeoman) Ionic Projects (Ionic Cloud) 6 : 6 , , . 6 6 Yeoman Ionic Framework , Web 7 7 Ionic . 7 8 . 8 9 / / . 9 10 . 10 11 2: " " " " ? 13 Examples 13 ionic vs ionic preparation 13 3: Ionic - jshint gulp-jshint 14 14 linting ? 14 Examples 14 14 .jshintrc ( ) 14 Makefile 15 4: Ionic 16 16 Examples 16 16 3 19 5: Ionic Apps 22 Examples 22 22 22 22 Github Repo 22 Codepen URL 22 : 22 / : 22 6: Ionic EcmaScript 6 ? 23 Examples 23 23 7: Ionic 24 24 24 Examples 24 Ionic 24 8: Ionic . 25 Examples 25 www . 25 9: Yeoman Ionic 26 Examples 26 Yo (Yeoman) Ionic Projects (Ionic Cloud) 26 : 26 , , . 26 26 Yeoman Ionic Framework , Web 26 27 Ionic . 27 28 . 28 29 / / . 29 30 . 30 31 10: Ionic 32 Examples 32 . 32 11: 33 33 33 Examples 34 34 LiveReload 34 34 IP 34 34 / 35 12: Ionic App 36 Examples 36 Ionic App 36 1. 36 2. 36 () 36 run emulate / 36 3. 37 4. 37 4.1. 38 13: (HTTP ) 39 Examples 39 n . 39 14: 40 40 Examples 40 40 40 15: AngularJS 41 41 Examples 41 41 41 41 41 42 16: CSS 43 43 Examples 43 43 43 44 44 44 45 46 17: (ionic.io) 47 Examples 47 47 18: 48 Examples 48 macOS 48 19: CLI 49 49 49 49 : 49 Examples 50 jshint before_prepare .
    [Show full text]
  • JSON at Work.Pdf
    JSON at Work PRACTICAL DATA INTEGRATION FOR THE WEB Tom Marrs JSON at Work Practical Data Integration for the Web Tom Marrs Beijing Boston Farnham Sebastopol Tokyo JSON at Work by Tom Marrs Copyright © 2017 Vertical Slice, Inc. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com/safari). For more information, contact our corporate/insti‐ tutional sales department: 800-998-9938 or [email protected]. Editor: Meg Foley Indexer: Ellen Troutman-Zaig Production Editor: Nicholas Adams Interior Designer: David Futato Copyeditor: Sharon Wilkey Cover Designer: Randy Comer Proofreader: Charles Roumeliotis Illustrator: Rebecca Demarest July 2017: First Edition Revision History for the First Edition 2017-06-16: First Release See http://oreilly.com/catalog/errata.csp?isbn=9781449358327 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. JSON at Work, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc. While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights.
    [Show full text]
  • Banana Documentation Release 0.1.14
    banana documentation Release 0.1.14 banana Apr 01, 2017 Contents 1 Getting started with Banana 1 1.1 Getting started with Banana.......................................1 1.2 Let’s Scaffold a Web App with Banana.................................3 1.3 Frequently Asked Questions.......................................3 1.4 Support..................................................5 2 Writing Your Own Banana Generator7 2.1 Writing Your Own Generator......................................7 2.2 Generator Runtime Context....................................... 10 2.3 Asynchronous tasks........................................... 12 2.4 Interacting With The User........................................ 12 2.5 Composability.............................................. 15 2.6 Managing Dependencies......................................... 18 2.7 Working With The File System..................................... 18 2.8 Managing Configuration......................................... 21 2.9 Testing Generators............................................ 23 2.10 Debugging Generators.......................................... 25 2.11 Integrating Banana............................................ 25 3 Let’s Scaffold a Web App 29 3.1 Step 1: Set up your dev environment.................................. 29 3.2 Step 2: Install a Banana generator.................................... 30 3.3 Step 3: Use a generator to scaffold out your app............................ 30 3.4 Step 4: Review the Banana-generated app................................ 32 3.5 Step 5: Preview your
    [Show full text]
  • Tamara Paula Temple – Webologist and Software Craftsperson
    H +1-651-485-2195 Tamara Paula Temple B [email protected] Í https://tamouse.org tamouse Webologist and Software Craftsperson tamouse Summary Deeply experienced in software design and development methodologies, especially related to the disciplines of software quality, web applications, user experience, and team building. Presently working at the intersection of Rails, GraphQL, and React, developing modern web applications with fast response times. Skills general software engineering, web development, software architecture, full-stack, backend, fron- business analysis, consulting, facilitat- engineering tend, low-level design, coding, debug- ing, teaching ging, testing, tool chains, APIs: SOAP, REST, GraphQL web Rails, Sinatra, Django, Flask, Express, web libraries React, GraphQL, ApolloClient frameworks ApolloServer, JAMstack, Gatsby databases PostgreSQL, MySQL, SQLite, Mon- languages Ruby, JavaScript, Perl, Shell, Python goDB, Redis 3, PHP, HTML5, CSS3, SCSS/SASS, HAML, C/C++ servers Netlify, nginx, puma, AWS ECS, EBS, static site jekyll, middleman, gatsby S3, Cloudfront generators tools Node.js, Emacs, Webstorm, RubyMine, testing Minitest, RSpec, Jest, Testing Library rake, thor, yeoman (yo), webpack, ba- bel, npm/npx, gulp, make Methods Program architecture and design; User-/task-centered design; Test-/behaviour-driven development; Structured analysis, design, development, and testing; Process flow analysis, systems theory, cybernetics; Object-oriented analysis, design, programming, and testing; Agile development, scrum master; Continuous
    [Show full text]
  • Introduction to Typescript. Building and Deploying Typescript Project
    Angular 2 and TypeScript IPT – Intellectual Products & Technologies Web Application Development http://www.iproduct.org/ Introduction to TypeScript. Building and Deploying TypeScript Project Trayan Iliev IPT – Intellectual Products & Technologies e-mail: [email protected] web: http://www.iproduct.org Oracle®, Java™ and JavaScript™ are trademarks or registered trademarks of Oracle and/or its affiliates. Microsoft .NET, Visual Studio and Visual Studio Code are trademarks of Microsoft Corporation. Other names may be trademarks of their respective owners. Copyright © 2003-2017 IPT – Intellectual Products & Technologies Ltd. All rights reserved. Slide 1 Angular 2 and TypeScript IPT – Intellectual Products & Technologies Web Application Development http://www.iproduct.org/ Course Program I 1. Introduction to TypeScript. - 3h 2. Introduction: Concepts of Angular, App Archutecture. Build-in directives and pipes. - 3h 3. Reactive Extensions for JS (RxJS). - 3h 4. Webpack. Angular CLI. AOT. TODO App with Angular CLI- 3h 5. Services. Dependency Injection. - 2h 6. Forms and Simple Validations. - 2h 7. Reactive Forms. Custom Validations and multi-providers. - 2h 8. Custom Pipes. Custom Directives. Renderer2. - 3h 9. Routing and Navigation. Animations. - 3h Copyright © 2003-2017 IPT – Intellectual Products & Technologies Ltd. All rights reserved. Slide 2 Angular 2 and TypeScript IPT – Intellectual Products & Technologies Web Application Development http://www.iproduct.org/ Course Program II 10. Routing and Navigation 2 (data, resolves, guards, lazy loading). - 3h 11. Zones. Change Detection. - 3h 12. Redux Architecture. Predictable Reactive State Management - NGRX/store. Reselect-style computing of derived data with RxJS. - 3h 13. Predictable Reactive State Management 2 - NGRX/effects. NGRX Router integration. IndexedDB integration. - 3h 14. Working with websockets. Custiom Reactive Web Socket Implementation with RxJS.
    [Show full text]