AngularJS: How to code today with tomorrow tools


Published on

Many popular online services have demonstrated the power of javascript, html5 and mobile technologies. However, designing, implementing & maintaining a rich application for both web and mobile browsers is a challenging task given the characteristics of javascript. We will share our real-world experience with AngularJS – an open source, robust and brilliantly usable tool which will make your app mobile and designer-friendly, extremely modular and reusable (with Dependency Injection!), and even easily testable (in javascript!), in less than half the code. Expect few slides and lots of code samples and tips from our project experiences

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

AngularJS: How to code today with tomorrow tools

  1. 1. Web Framework AngularJS How to code today with tomorrow tools Carlo Bonamico - @carlobonamico NIS s.r.l.
  2. 2. Yes but you can't do that in a web app Sure? people used to think it was impossible to get interactive email clients (GMail) word processors and spreadsheets (GDocs) file share (Dropbox) real-time monitoring (Kibana) offline apps (Nozbe) The web is (and will always be) more powerful than people think! the same now applies to mobile web which will overcome the "desktop" web in terms of traffic next year
  3. 3. OK, wo I will go for HTML5 to implement my next great service/project ... a few months go by... WTF!! I did not think web development was could be that messy! Spaghetti code tastes better in a dynamic language such as JS I spent most of my time juggling the DOM I cannot integrate the Form widgets I love with the charts library I love Where is modularization? and encapsulation? "everything" can fiddle with "everything"...
  4. 4. Then the problems begin Initially, it "feels" more productive, but... When the app grows, debugging gets harder refactoring gets harder effective testing gets impossible When the team grows, collaboration becomes harder! every time a designer makes a beautiful look, we spend days implementing it and regression testing It's becoming impossible to evolve!
  5. 5. HELP ME! Please, before I go back to Desktop development, can you tell me if there is a better way?
  6. 6. If I were to answer this question in 2008... Almost a no brainer: go for Adobe Flex! It has encapsulation, interfaces event driven GUI modular and reusable comoponents great tooling The web platform was just not there yet...
  7. 7. Fast-forward to 2015... Definitely a no-brainer: go for Web Components + event-driven MVC
  8. 8. And now? on end of 2013 Blurry situation... Adobe Flex is Open Source (but maybe too late...) and lost support HTML5 is booming, but large-scale JS dev is hard But please, I HAVE to deliver a great Web App in a few months!
  9. 9. Well.. The future is already here — it's just not very evenly distributed. William Gibson If the hundred year language (from 2113) were available today, would we want to program in it? Paul Graham -
  10. 10. Enter AngularJS Use tomorrow web technologies today And almost transparently upgrade as soon as they are available
  11. 11. Robust, productive (& fun!) Web dev Open Source toolset backed by Google great, active and open community used from startups to Microsoft, Oracle & Google itself Extremely productive, robust, testable, and scalable from mockups to small apps to large enterprise apps
  12. 12. Strong points Angular follows and ehnances the HTML way of doing things declarative interoperable Event-driven Model-View-Controller plain JS models Data binding View is as decoupled as possibile from logic Great for effective Designer-Developer workflows!
  13. 13. OK, you are getting me interested but I want proof!
  14. 14. Well... OK! THIS presentation is not PowerPoint nor OpenOffice nor Keynote
  15. 15. It's an AngularJS app I wrote in a few hours Press F12 to be sure! Thanks !
  16. 16. #
  17. 17. What's inside A View: index.html a style.css peppered-up with AngularJS 'ng-something' directives A model data: code: array of slide object A controller script.js
  18. 18. The model var slide = { number: i + 1, title: "Title " + i, content: "#Title n markdown sample", html: "", background: "backgroundSlide" };
  19. 19. A service to load the model from markdown ngSlides.service('slidesMarkdownService', function ($http) { var converter = new Showdown.converter(); return { getFromMarkdown: function (path) { var slides = []; $http({method: 'GET', url: path}). success(function (data, status, headers, config) { var slidesToLoad = data.split(separator); //two dashes for (i = 0; i < slidesToLoad.length; i++) { var slide = { content: slidesToLoad[i], //.. init other slide fields }; slide.html = converter.makeHtml(slide.content); slides.push(slide); } }); return slides; } } })
  20. 20. A simple declarative view binding the model to the html <body ng-app="ngSlides" ng-class="slides[currentSlide].background" ng-controller="presentationCtrl"> <div id="slidesContainer" class="slidesContainer" > <div class="slide" ng-repeat="slide in slides" ng-show="slide.number == currentSlide" > <div ng-bind-html="slide.html"></div> <h4 class="number">{{slide.number}}</h4> </div> </div> </body> and a very simple css for positioning elements in the page
  21. 21. A controller focused on interaction ngSlides.controller("presentationCtrl", function ($scope, $http, $rootScope, slidesMarkdownService) { $scope.slides = slidesMarkdownService.getFromMarkdown(''); $scope.currentSlide = 0; $ = function () { $scope.currentSlide = $scope.currentSlide + 1; }; $scope.previous = function () { $scope.currentSlide = $scope.currentSlide - 1; }; });
  22. 22. Integration with non-angular code $apply utility function to notify angular of changes angular.element( ...).scope() to access controller methods and scope outside angular document.onkeyup = KeyPressed; function KeyPressed(e) { var key = ( window.event ) ? event.keyCode : e.keyCode; var controllerElement = angular.element(document.getElementById("slidesContainer")) ; var scope = controllerElement.scope() scope.$apply(function () { switch (key) { case 39: {; break; } //...
  23. 23. Slide sources in markdown format #It's an AngularJS app I wrote in a few hours <br/> ## Press F12 to be sure!
  24. 24. What's inside - details A custom directive A few filters
  25. 25. AngularJS magic Any sufficiently advanced technology is indistinguishable from magic. Arthur C. Clarcke <li ng-repeat="slide in slides | filter:q">...</li>
  26. 26. AngularJS magic is made of Dependency Injection makes for decoupling, testability, and enriching of your code and tags function SlidesCtrl($scope, SlidesService) { SlidesService.loadFromMarkdown(''); }
  27. 27. AngularJS magic is made of Transparent navigation and history with ng-view and ng-route Databinding a few little tricks (Dirty checking) which will disappear when the future (ECMAScript6 object.observe) arrives
  28. 28. The power of composition Microkernel architecture core: HTML compiler, Dependency Injection, module system everything else is a directive, service or module Composition of modules module('slides',['slides.markdown']) directives <h1 ng-show='enableTitle' ng-class='titleClass'>..</h1> filters slide in slides | filter:q | orderBy:title | limit:3 ... Do you know of other microkernel-based technologies with a strong focus on composition? they tend to be strong and long lived :-), right Linux, Maven, Jenkins?
  29. 29. Take advantage of AngularJS capabilities Integration with other frameworks Showdon Markdown converter Highlight.js for syntax highlighting plain JS for keyboard handling AngularJS is opinionated but it will let you follow a different way in case you really really need it
  30. 30. Testing Unit Testing mocking http mocking End-To-End testing scenarios Jasmine
  31. 31. Weak points Even angular is not perfect... yet! Dynamic page rendering, so SEO is hard temporary solutions with PhantomJS on the server side a few cloud-based services personally think Google is working on fixing that Tooling is good but can improve Support for lesser browser
  32. 32. Lessons learnt angularJS docs are great! but beware of <ANY ng-show="{expression}"> If you write <div ng-show="{divEnableFlag}"> It won't work! Write <div ng-show="divEnableFlag">
  33. 33. Lessons learnt Getting started is very easy But to go further you need to learn the key concepts promises dependency injection directives scopes
  34. 34. Lessons learnt Like all the magic wands, you could end up like Mikey Mouse as the apprentice sorcerer So get your training! Online Codemotion training (4-5 february and 4-5 march 2014)
  35. 35. Lessons learnt AngularJS makes for great mockups interactivity in plain HTML views AngularJS changes your way of working (for the better!) let you free of concentrating on your ideas makes for a way faster development cycle makes for a way faster interaction with customer cycle essential for Continuous Delivery!
  36. 36. To learn more Online tutorials and video trainings: All links and reference from my Codemotion Workshop Full lab from my Codemotion Workshop
  37. 37. Web Components Youtube video "Web Components in Action"
  38. 38. Books AngularJS and .NET
  39. 39. My current plans writing about AngularJS and security attend Marcello Teodori talk on JS Power Tools integrate AngularJS with my favourite Open Source server-side dev platform preparing the 'Advanced AngularJS' workshop contact us if interested
  40. 40. Thank you! Explore these slides My presentations Follow me at @carlobonamico / @nis_srl will publish these slides in a few days Attend my Codemotion trainings Write me if you are interested in the upcoming AngularJS Italy online community and thanks to Elena Venni for the many ideas about Angular in our last project together