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

cezargcarneiro@gmail.com