JS FAST Prototyping with AngularJS & RequireJS


Published on

JS FAST Prototyping with AngularJS & RequireJS.
From #kharkivjs conference

1 Comment
  • Nice info!
    I put together a project seed that do not need Node.js for prototyping, but only for minification and optimization: https://github.com/pheno7/angular-requirejs-seed
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

JS FAST Prototyping with AngularJS & RequireJS

  1. 1. Application in 24h Fast prototyping of rich UI applications using AngularJS, RequireJS, jQuery by Yuriy V. Silvestrov, Mikhail Valkov @ysilvestrov, @valkovnet
  2. 2. About usYuriy V. Silvestrov10+ years record in IT, 8+ years devoted to managingprojects. At the beginning of December have left Ciklumto run a PromoRepublic startup as CTO andcofounder.Twitter: @ysilvestrovPlease visit my websitehttp://yuriy.silvestrov.comfor more info or contact me atyuriy@silvestrov.com. @ysilvestrov, @valkovnet
  3. 3. About usMikhail Valkov10+ years record in IT. 2+ years devoted to systemarchitecture. Now working for Ciklum.for more info contact me atvalkov.net@gmail.com. @ysilvestrov, @valkovnet
  4. 4.  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
  5. 5. ⌛ < 30Time is counting @ysilvestrov, @valkovnet
  6. 6.  Have tried to do a startup? Participated in Hakatons or similar events? Is JavaScript/HTML5 expert? Is AngularJS/RequireJS expert? We’ll try to adaptHow many of you @ysilvestrov, @valkovnet
  7. 7.  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&AContent @ysilvestrov, @valkovnet
  8. 8.  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 usePrototyping @ysilvestrov, @valkovnet
  9. 9.  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
  10. 10.  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
  11. 11.  Choose platform Download seed for chosen platform Quick UI Choose vital functionality to prototype Find the frameworks/solutions realizing the functionality Compose all together … PROFITHow to do it FAST @ysilvestrov, @valkovnet
  12. 12.  Plain, vanilla Client-Side JS & HTML5 No CoffeeScript No node.jsClient-side JavaScript @ysilvestrov, @valkovnet
  13. 13.  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 integrateComponent development @ysilvestrov, @valkovnet
  14. 14. jQuery and plugins @ysilvestrov, @valkovnet
  15. 15.  One of 20+ MVC JS frameworks Supported by Google Integrated ◦ Templates ◦ Directives and filters ◦ Module systems ◦ Resources ◦ Asynchronous programmingVisit http://angularjs.org for detailsAngular JS @ysilvestrov, @valkovnet
  16. 16.  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<!-- ko foreach: navigation.pages --><div class="body row scroll-y" data-bind=" visible: isCurrent, attr: { id: content + id }, template: { name: id, if: isLoaded, afterRender:afterRender }"></div><!-- /ko -->Angular JS vs Knockout JS @ysilvestrov, @valkovnet
  17. 17.  Then, it is faster: According to jsPerf tests, bindings in Angular 1.6 to 3 times faster than Knockout onesAngular JS vs Knockout JS @ysilvestrov, @valkovnet
  18. 18.  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 formattersAngular JS vs Knockout JS @ysilvestrov, @valkovnet
  19. 19.  Integration with Twitter Bootstrap Companion AngularUI library AngularJS allows to create an “HTML- based DSL”, which include specific tags to solve specific tasksAngular JS pros @ysilvestrov, @valkovnet
  20. 20.  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
  21. 21.  Dependency isolation Dependency management Modules loading & cashingVisit http://requirejs.org/ for detailsRequireJS @ysilvestrov, @valkovnet
  22. 22.  Twitter bootstrap http://twitter.github.com/bootstrap/ ◦ Made for everyone ◦ Packed with featuresBootstrap usage @ysilvestrov, @valkovnet
  23. 23.  Creates a lingua franca for developers and designers, provides a common language telling how the components should behave and lookBootstrap usage @ysilvestrov, @valkovnet
  24. 24.  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 themesTwitter bootstrap extensions @ysilvestrov, @valkovnet
  25. 25. https://github.com/angular/angular-seedhttps://github.com/ysilvestrov/angular-seedAngular Seed @ysilvestrov, @valkovnet
  26. 26.  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
  27. 27.  Do not use “define” for controllers – you’d to return too much Use services to manage controllers dependenciesRequiring Angular:practical advices @ysilvestrov, @valkovnet
  28. 28.  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 architecturesRequiring Angular: cons @ysilvestrov, @valkovnet
  29. 29.  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 userRich JS UI approach – twitter trap @ysilvestrov, @valkovnet
  30. 30.  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 availableRich JS UI approach – twitter trap @ysilvestrov, @valkovnet
  31. 31. ???Questions? @ysilvestrov, @valkovnet
  32. 32. yuriy@silvestrov.comvalkov.net@gmail.comThank you!Waiting for your demos