Building SPAs with AngularJS

Building SPAs with AngularJS

• 1.
  Building SPAs withAngularJS Cezar Carneiro
• 2.
  Front-End Development Before: ● Veryfew 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;
• 3.
  Single Page Applications “SinglePage 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
• 4.
  Single Page Applications- Tiers Server API HTTP View Rendering Persistency Models Routes Events Handling 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.
• 5.
  Single Page Applications- Layers How MVC works in a SPA
• 6.
  Front End Tools ●Organize Dependencies Package Managers: NPM, Bower; ● Run Tasks Task Runners: Gulp.js, Grunt.js; ● Develop Frameworks: AngularJS, Backbone, React, Bootstrap, Foundation, Font-Awesome; ● Debug Sourcemaps + Browser, Batarang; ● Deploy Heroku, AWS, DigitalOcean;
• 7.
  ➔ Started in2009; ➔ 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;
• 8.
  Proposal ● Web applicationsproperly structured; ● Complete solution, free of dependencies; ● High level of abstraction; ● Declarative approach;
• 9.
  Out There 28/may/2015 07/aug/2014 Googlesearches: Contributors:
• 10.
  ➔Dependency Injection ➔Data Binding ➔FormValidation ➔{{ Expressions }} ➔Bootstrapping ➔Routing ➔i18n and l10n AngularJS - Features Two-way data-binding
• 11.
  ➔Unnecessary complexity; ➔Dirty Checking; ➔FullDOM parsing; ➔The Angular Way; AngularJS - Cons
• 12.
  AngularJS - Components ➔Modules; ➔Controllers; ➔Services; ➔Filters; ➔Directives; ➔Views; ➔Partials; ➔etc
• 13.
  AngularJS 2.0 ➔No retrocompatibility; ➔Manyconcepts were dropped; ➔New concepts come to existence; ➔Substantial performance improvement;
• 14.
  Demo Yoda Sentence Converter Input:Active voice sentence; Output: Same sentence on the passive voice;
• 15.
  index.html ➔ Instantiation the main moduleof the app; ➔ Loads static resources; ➔ Is only the framing;
• 16.
  Module ➔ Declaration ofthe module ‘yoda-converter’ (main module); ➔ Requiring the module ‘ngRoute’; ➔ Declaring the routes of the application;
• 17.
  View ➔ Instantiates the controller (line1); ➔ Binding of the model (lines 5, 10 and 12); ➔ Click Event (line 6); ➔ Use of expressions (lines 10 and 12);
• 18.
  Controller ➔ Initialization ofthe model ‘sentence’ (line 5); ➔ Declaration of the click listener (line 10); ➔ Call to the service (line 11); ➔ Updates the model ‘sentence’ (line 13);
• 19.
  Service ➔ Declaration of thefunction ‘converting’ (line 4); ➔ Return of a $http promise (line 5); ➔ Cases of success and error of the promise (lines 15 and 17);
• 20.
  Thanks for watching github.com/cezar-carneiro cezargcarneiro@gmail.com