Download - Building SPAs with AngularJS
Building SPAs with AngularJS
Cezar Carneiro
Front-End DevelopmentBefore:● Very few tools and technologies;● Limited ability with JavaScript, HTML and CSS;● Low expectation from JavaScript;● We used to hate of Internet Explorer;
Now:● We still hate Internet Explorer;
● Use of JavaScript as main language;
● Infinity of tools and technologies;
Single Page Applications
“Single Page Applications (SPA) are built on expanding reach via the browser, reducing round tripping, and enhancing User Experience (UX) [...] you can build a SPA that supports robust business applications. Angular, Durandal, and Ember are three great SPA presentation frameworks that lead the way in this area.”
John Papa, Google Dev. Expert, Microsoft MVPJohn Papa
Single Page Applications - Tiers
Server API HTTP
ViewRendering
Persistency
Models
Routes
EventsHandling
I18n
Front-End
Back-End
● MV-whatever structure on the client.● Interactions are treated on the page.● Most of the time the server only serves
the static resources of the application.● The SPA usually relies on a HTTP API.
● In some cases the server might pre-render a view for SEO purposes.
● The API may be hosted on the same server of the application.
Single Page Applications - Layers
How MVC works in a SPA
Front End Tools
● Organize DependenciesPackage Managers: NPM, Bower;
● Run TasksTask Runners: Gulp.js,
Grunt.js;
● DevelopFrameworks: AngularJS,
Backbone, React, Bootstrap, Foundation, Font-Awesome;
● DebugSourcemaps + Browser, Batarang;
● DeployHeroku, AWS, DigitalOcean;
➔ Started in 2009;➔ By Miško Hevery and Adam Abrons, (Brat Tech LLC);➔ Sponsored by Google;➔ Open to the community;➔ Version 1.3.15 (till the date of this presentation);
➔ Very attractive to back-enders;
Proposal● Web applications properly structured;
● Complete solution, free of dependencies;
● High level of abstraction;
● Declarative approach;
Out There
28/may/2015 07/aug/2014
Google searches:
Contributors:
➔ Dependency Injection➔ Data Binding➔ Form Validation➔ {{ Expressions }}➔ Bootstrapping➔ Routing➔ i18n and l10n
AngularJS - Features
Two-way data-binding
➔ Unnecessary complexity;➔ Dirty Checking;➔ Full DOM parsing;➔ The Angular Way;
AngularJS - Cons
AngularJS - Components➔ Modules;➔ Controllers;➔ Services;➔ Filters;➔ Directives;➔ Views;➔ Partials;➔ etc
AngularJS 2.0➔ No retrocompatibility;➔ Many concepts were
dropped;➔ New concepts come to
existence;➔ Substantial performance
improvement;
Demo
Yoda Sentence Converter
Input: Active voice sentence;
Output: Same sentence on the passive voice;
index.html
➔ Instantiation the main module of the app;
➔ Loads static resources;
➔ Is only the framing;
Module
➔ Declaration of the module ‘yoda-converter’ (main module);➔ Requiring the module ‘ngRoute’;➔ Declaring the routes of the application;
View➔ Instantiates
the controller (line 1);
➔ Binding of the model (lines 5, 10 and 12);
➔ Click Event (line 6);
➔ Use of expressions (lines 10 and 12);
Controller➔ Initialization of the model ‘sentence’ (line 5);➔ Declaration of the click listener (line 10);➔ Call to the service (line 11);➔ Updates the model ‘sentence’ (line 13);
Service➔ Declaration of
the function ‘converting’ (line 4);
➔ Return of a $http promise (line 5);
➔ Cases of success and error of the promise (lines 15 and 17);
Thanks for watching
github.com/cezar-carneiro