AngularJS: How to code today with tomorrow tools
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

AngularJS: How to code today with tomorrow tools

on

  • 1,869 views

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 ...

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

Statistics

Views

Total Views
1,869
Views on SlideShare
1,868
Embed Views
1

Actions

Likes
1
Downloads
9
Comments
0

1 Embed 1

http://milano.codemotionworld.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

AngularJS: How to code today with tomorrow tools Presentation Transcript

  • 1. Web Framework AngularJS How to code today with tomorrow tools Carlo Bonamico - @carlobonamico NIS s.r.l. carlo.bonamico@gmail.com carlo.bonamico@nispro.it
  • 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. 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. 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. HELP ME! Please, before I go back to Desktop development, can you tell me if there is a better way?
  • 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. Fast-forward to 2015... Definitely a no-brainer: go for Web Components + event-driven MVC http://mozilla.github.io/brick/docs.html http://www.polymer-project.org/
  • 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. 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 - http://paulgraham.com/hundred.html
  • 10. Enter AngularJS Use tomorrow web technologies today http://www.angularjs.org And almost transparently upgrade as soon as they are available http://www.2ality.com/2013/05/web-components-angular-ember.html
  • 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. 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. OK, you are getting me interested but I want proof!
  • 14. Well... OK! THIS presentation is not PowerPoint nor OpenOffice nor Keynote
  • 15. It's an AngularJS app I wrote in a few hours Press F12 to be sure! Thanks http://plnkr.co !
  • 16. #
  • 17. What's inside A View: index.html a style.css peppered-up with AngularJS 'ng-something' directives A model data: slides.md code: array of slide object A controller script.js
  • 18. The model var slide = { number: i + 1, title: "Title " + i, content: "#Title n markdown sample", html: "", background: "backgroundSlide" };
  • 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. 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. A controller focused on interaction ngSlides.controller("presentationCtrl", function ($scope, $http, $rootScope, slidesMarkdownService) { $scope.slides = slidesMarkdownService.getFromMarkdown('slides.md'); $scope.currentSlide = 0; $scope.next = function () { $scope.currentSlide = $scope.currentSlide + 1; }; $scope.previous = function () { $scope.currentSlide = $scope.currentSlide - 1; }; });
  • 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: { scope.next(); break; } //...
  • 23. Slide sources in markdown format slides.md #It's an AngularJS app I wrote in a few hours <br/> ## Press F12 to be sure!
  • 24. What's inside - details A custom directive A few filters
  • 25. AngularJS magic Any sufficiently advanced technology is indistinguishable from magic. Arthur C. Clarcke <li ng-repeat="slide in slides | filter:q">...</li>
  • 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('slides.md'); }
  • 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. 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. Take advantage of AngularJS capabilities Integration with other frameworks Showdon Markdown converter https://github.com/coreyti/showdown 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. Testing Unit Testing mocking http mocking End-To-End testing scenarios Jasmine
  • 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. 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. Lessons learnt Getting started is very easy But to go further you need to learn the key concepts promises dependency injection directives scopes
  • 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) http://training.codemotion.it/
  • 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. To learn more Online tutorials and video trainings: http://www.yearofmoo.com/ http://egghead.io All links and reference from my Codemotion Workshop https://github.com/carlobonamico/angularjs-quickstart https://github.com/carlobonamico/angularjsquickstart/blob/master/references.md Full lab from my Codemotion Workshop https://github.com/carlobonamico/angularjs-quickstart
  • 37. Web Components http://www.w3.org/TR/components-intro/ Youtube video "Web Components in Action" http://css-tricks.com/modular-future-web-components/
  • 38. Books http://www.ng-book.com/ AngularJS and .NET http://henriquat.re
  • 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 http://www.manydesigns.com/en/portofino preparing the 'Advanced AngularJS' workshop contact us if interested
  • 40. Thank you! Explore these slides https://github.com/carlobonamico/angularjs-future-webdevelopment-slides My presentations http://slideshare.net/carlo.bonamico Follow me at @carlobonamico / @nis_srl will publish these slides in a few days Attend my Codemotion trainings http://training.codemotion.it/ 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