JS FAST Prototyping with AngularJS & RequireJS

Application in 24h Fast prototyping of rich UI applications using AngularJS, RequireJS, jQuery by Yuriy V. Silvestrov, Mikhail Valkov @ysilvestrov, @valkovnet

About us Yuriy V. Silvestrov 10+ years record in IT, 8+ years devoted to managing projects. At the beginning of December have left Ciklum to run a PromoRepublic startup as CTO and cofounder. Twitter: @ysilvestrov Please visit my website http://yuriy.silvestrov.com for more info or contact me at yuriy@silvestrov.com. @ysilvestrov, @valkovnet

About us Mikhail Valkov 10+ years record in IT. 2+ years devoted to system architecture. Now working for Ciklum. for more info contact me at valkov.net@gmail.com. @ysilvestrov, @valkovnet

 Based on our own About lection experience  Useful for startups and pet projects  Not the right way, not the best way, but the fast one.  Divide and conquer  @ysilvestrov, @valkovnet

⌛ < 30 Time is counting @ysilvestrov, @valkovnet

 Have tried to do a startup?  Participated in Hakatons or similar events?  Is JavaScript/HTML5 expert?  Is AngularJS/RequireJS expert?  We’ll try to adapt How many of you @ysilvestrov, @valkovnet

 Startup mode ON ◦ When do we need quick prototyping? ◦ How to quick prototype an app? ◦ Our “marketplace” challenge  JavaScript DSL ◦ MVC in JavaScript ◦ AngularJS ◦ RequireJS, Modules and AMD  Design DSL ◦ Using bootstraps (twitter etc.) ◦ Responsive design  Q&A Content @ysilvestrov, @valkovnet

 A way to write something useful and not to spend years on it  Prototyping = Minimum Viable Product creation ◦ If you’ll fail, it would be fast ◦ If not, you’ll have plenty of time to refactor the application ◦ …while the “prototype” is still in use Prototyping @ysilvestrov, @valkovnet

 In PromoRepublic, we’re creating promos like contests, lotteries etc.  Our backend is complex .NET application based on Azure services  We’d like to open marketplace to sell the promo templates from independent developers  So we need to simplify the process for them, and need simple but powerful way to write the rich UI templates. Marketplace challenge @ysilvestrov, @valkovnet

 An ability to quickly alter UI (or create totally new one) leaving the promotion mechanic unchanged  One app to rule them all: from mobiles to tablets and desktops  < 24 hours to make it  Promotion template: what we’re to use it for @ysilvestrov, @valkovnet

 Choose platform  Download seed for chosen platform  Quick UI  Choose vital functionality to prototype  Find the frameworks/solutions realizing the functionality  Compose all together  …  PROFIT How to do it FAST @ysilvestrov, @valkovnet

 Plain, vanilla Client-Side JS & HTML5  No CoffeeScript  No node.js Client-side JavaScript @ysilvestrov, @valkovnet

 Use 3-rd party components  Existing online services ◦ Prefer ones implementing REST interface ◦ Or having JS SDKs  Create new ones ◦ create them with REST  Use dependency managers to integrate Component development @ysilvestrov, @valkovnet

jQuery and plugins @ysilvestrov, @valkovnet

 One of 20+ MVC JS frameworks  Supported by Google  Integrated ◦ Templates ◦ Directives and filters ◦ Module systems ◦ Resources ◦ Asynchronous programming Visit http://angularjs.org for details Angular JS @ysilvestrov, @valkovnet

 First of all, it is simpler: <li ng-repeat="tab in tabs" ng-class="isActive(tab.path)"> <a href="#/{{tab.path}}">{{tab.name}}</a> </li>  vs  <div class="body row scroll-y" data-bind=" visible: isCurrent, attr: { id: 'content' + id }, template: { name: id, 'if': isLoaded, afterRender: afterRender }"> </div>  Angular JS vs Knockout JS @ysilvestrov, @valkovnet

 Then, it is faster:  According to jsPerf tests, bindings in Angular 1.6 to 3 times faster than Knockout ones Angular JS vs Knockout JS @ysilvestrov, @valkovnet

 AngularJS has some nice features right from the box that I haven’t found in knockout ◦ Directives, which could be used to create widgets ◦ Integrated end to end test framework ◦ Filters and formatters Angular JS vs Knockout JS @ysilvestrov, @valkovnet

 Integration with Twitter Bootstrap  Companion AngularUI library  AngularJS allows to create an “HTML- based DSL”, which include specific tags to solve specific tasks Angular JS pros @ysilvestrov, @valkovnet

 Load time ◦ Load angular + require + jquery + all the plugins, then load server data, then e.g. sign in to facebook and loaf it’s data – takes some time  Databinding takes place right away, but services are deferred ◦ If to bind a GUI visible variable to a service result directly, user will see {{template}} while data loads, so that “double buffering” is needed. Angular JS cons @ysilvestrov, @valkovnet

 Dependency isolation  Dependency management  Modules loading & cashing Visit http://requirejs.org/ for details RequireJS @ysilvestrov, @valkovnet

 Twitter bootstrap http://twitter.github.com/bootstrap/ ◦ Made for everyone ◦ Packed with features Bootstrap usage @ysilvestrov, @valkovnet

 Creates a lingua franca for developers and designers, provides a common language telling how the components should behave and look Bootstrap usage @ysilvestrov, @valkovnet

 Jasny bootstrap(http://jasny.github.com/bootstrap/) ◦ Row links, Input mask, File upload ◦ … and much more  Kickstrap (http://getkickstrap.com/) ◦ Bootstrap with blackjack and hookers ◦ actually, with apps and themes Twitter bootstrap extensions @ysilvestrov, @valkovnet

https://github.com/angular/angular-seed https://github.com/ysilvestrov/angular-seed Angular Seed @ysilvestrov, @valkovnet

 Use domReady! plugin to start Angular bootstrap at a time  define(['require', 'lib/angular/angular', 'app', 'lib/angular/angular-ui'],  function(require, angular) {  'use strict';  return require(['lib/require/domReady!'], function(document) {  return angular.bootstrap(document, ['TwitContest']);  });  }); Requiring Angular: what’s inside @ysilvestrov, @valkovnet

 Do not use “define” for controllers – you’d to return too much  Use services to manage controllers dependencies Requiring Angular: practical advices @ysilvestrov, @valkovnet

 The speed of first-time loading is not perfect; so in production minifying and compressing became the must  However, RequireJS needs NodeJS for minification process, which is still not the common part of most architectures Requiring Angular: cons @ysilvestrov, @valkovnet

 Twitter have had the same problem this year  It’s rather architectural then framework one  Standard approach 1. Load common GUI template 2. Make series of requests to server 3. Load required data (pictures etc.) 4. Parse the data 5. Present it to user Rich JS UI approach – twitter trap @ysilvestrov, @valkovnet

 Straightforward approach fails because of: ◦ User doesn’t want to wait seconds while application is loading data ◦ If something goes wrong (i.e. one of the requests fail, or JS error) – nothing is shown  Solution: ◦ Prerender some data on server side and present it to user right away ◦ Redraw data on client side when it’s available Rich JS UI approach – twitter trap @ysilvestrov, @valkovnet

??? Questions? @ysilvestrov, @valkovnet

yuriy@silvestrov.com valkov.net@gmail.com Thank you! Waiting for your demos

JS FAST Prototyping with AngularJS & RequireJS

More Related Content

What's hot

Viewers also liked

Similar to JS FAST Prototyping with AngularJS & RequireJS

More from Yuriy Silvestrov

JS FAST Prototyping with AngularJS & RequireJS