Upload
yuriy-silvestrov
View
5.692
Download
3
Tags:
Embed Size (px)
DESCRIPTION
JS FAST Prototyping with AngularJS & RequireJS. From #kharkivjs conference
Citation preview
Application in 24hFast prototyping of rich UI applications using
AngularJS, RequireJS, jQuery
by Yuriy V. Silvestrov, Mikhail Valkov
@ysilvestrov, @valkovnet
About us
Yuriy V. Silvestrov10+ 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.comfor more info or contact me at [email protected].
@ysilvestrov, @valkovnet
About us
Mikhail Valkov10+ years record in IT. 2+ years devoted to system
architecture. Now working for Ciklum.
for more info contact me at [email protected].
@ysilvestrov, @valkovnet
About lectionBased on our own experience
Useful for startups and pet projects
Not the right way, not the best way, but the fast one.
Divide and conquer
@ysilvestrov, @valkovnet
Time is counting
⌛ < 30
@ysilvestrov, @valkovnet
How many of you
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
@ysilvestrov, @valkovnet
Content
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
@ysilvestrov, @valkovnet
Prototyping
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
@ysilvestrov, @valkovnet
Marketplace challenge
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.
@ysilvestrov, @valkovnet
Promotion template:what we’re to use it for
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
@ysilvestrov, @valkovnet
How to do it FAST
Choose platformDownload seed for chosen platformQuick UIChoose vital functionality to prototype Find the frameworks/solutions realizing
the functionalityCompose all together…PROFIT
@ysilvestrov, @valkovnet
Client-side JavaScript
Plain, vanilla Client-Side JS & HTML5
No CoffeeScript
No node.js
@ysilvestrov, @valkovnet
Component development
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
@ysilvestrov, @valkovnet
jQuery and plugins@ysilvestrov, @valkovnet
Angular JS
One of 20+ MVC JS frameworksSupported by GoogleIntegrated
◦Templates◦Directives and filters◦Module systems◦Resources◦Asynchronous programming
Visit http://angularjs.org for details
@ysilvestrov, @valkovnet
Angular JS vs Knockout JS
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 -->
@ysilvestrov, @valkovnet
Angular JS vs Knockout JS
Then, it is faster:
According to jsPerf tests, bindings in Angular 1.6 to 3 times faster than Knockout ones
@ysilvestrov, @valkovnet
Angular JS vs Knockout JS
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
@ysilvestrov, @valkovnet
Angular JS pros
Integration with Twitter BootstrapCompanion AngularUI library
AngularJS allows to create an “HTML-based DSL”, which include specific tags to solve specific tasks
@ysilvestrov, @valkovnet
Angular JS cons
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.
@ysilvestrov, @valkovnet
RequireJS
Dependency isolation
Dependency management
Modules loading & cashing
Visit http://requirejs.org/ for details
@ysilvestrov, @valkovnet
Bootstrap usage
Twitter bootstrap http://twitter.github.com/bootstrap/◦Made for everyone
◦Packed with features
@ysilvestrov, @valkovnet
Bootstrap usage
Creates a lingua franca for developers and designers, provides a common language telling how the components should behave and look
@ysilvestrov, @valkovnet
Twitter bootstrap extensions
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
@ysilvestrov, @valkovnet
Angular Seed
https://github.com/angular/angular-seedhttps://github.com/ysilvestrov/angular-seed
@ysilvestrov, @valkovnet
Requiring Angular:what’s inside
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']); }); });
@ysilvestrov, @valkovnet
Requiring Angular:practical advices
Do not use “define” for controllers – you’d to return too much
Use services to manage controllers dependencies
@ysilvestrov, @valkovnet
Requiring Angular: cons
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
@ysilvestrov, @valkovnet
Rich JS UI approach – twitter trap
Twitter have had the same problem this year
It’s rather architectural then framework one
Standard approach1. Load common GUI template2. Make series of requests to server3. Load required data (pictures etc.)4. Parse the data5. Present it to user
@ysilvestrov, @valkovnet
Rich JS UI approach – twitter trap
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 shownSolution:
◦Prerender some data on server side and present it to user right away
◦Redraw data on client side when it’s available
@ysilvestrov, @valkovnet
Questions?
???
@ysilvestrov, @valkovnet
Thank you! Waiting for your demos