Angular js How, What & Why - MetaRefresh 2014


Published on

Presentation used for the opening note at the HasGeek Metarefresh AngularJS miniconf in Bangalore in Feb 2014. What are the the major features of AngularJS, benefits and how it developed!

Published in: Technology
1 Like
  • Be the first to comment

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

No notes for slide
  • JS Stack
    AngularJS enthusiast
  • the Java promise
    How do you get a gmail like app, without so much code and making it maintainable
  • The entire aim of an AngularJS app is to modify the model. The UI updates automatically
  • Angular js How, What & Why - MetaRefresh 2014

    1. 1. AngularJS: How, Why & What’s the difference? Shyam Seshadri Director, Fundoo Solutions
    2. 2. “Who are you again??” –Most people I meet
    3. 3. I am • Xoogler - Feedback & AngularJS team • MBA, ISB Hyderabad • Author, AngularJS, O’Reilly • Director, Fundoo Solutions • Part time AngularJS Trainer • Coder / Geek
    4. 4. History • Started when JS was sexy, but hard to manage • Google Feedback, in GWT Hell • Every framework / language had some good things • Flex with Data binding (one-way, though) • Ruby routes • Java with Dependency Injection & Testability
    5. 5. “Hey, I built a framework to learn Javascript in my free time. We should totally use it.” –Misko Hevery, Founder of AngularJS
    6. 6. So what is Open Source, Open Source, Javascript Javascript Extension Extension friendly friendly Declarative, Declarative, MVVW MVVW Extends Extends HTML HTML Great Great Community Community To Create To Create Amazing Web Amazing Web Apps Apps
    7. 7. The promised land? THE PROMISE THE RESULT REDUCED LINES OF CODE From 20,000 to 1500!! FASTER DEVELOPMENT 6 months, GWT = 3 weeks, AngularJS
Increased Velocity!! TESTABLE, MAINTAINABLE JS Dependency Injection & S
uper Fast Unit Testing EASIER TEMPLATING & STYLING Templates pure HTML, CS
 & Designer friendly INTEGRATE WITH OTHER LIBRARIES Directives! Extend HTML and teach it new tricks!
    8. 8. Advantages - Developer HTML + JS HTML + JS Data Binding Data Binding Dependency Injection Dependency Injection Custom Components Custom Components Super Easy Testing Super Easy Testing Amazing Community! Amazing Community!
    9. 9. The Result? Drastically Less Lines Drastically Less Lines of Code of Code Focus on your core, Focus on your core, not the crap not the crap More maintainable, More maintainable, extensible extensible Component friendly Component friendly Well Tested, Robust Well Tested, Robust Designer Friendly Designer Friendly
    10. 10. Requirements? • The same requirements that jQuery has • A Server!! (Sometimes…) • Works well with Java, as well as with Ruby, Python, etc. • • • Really independent of the Server Needs a way of fetching and storing Data (XHR, Sockets…) Easier if it talks JSON But not required • Can transform requests and responses • No JSON? No problem! •
    11. 11. Starting an AngularJS Project <html ng-app> <head> <script src=“angular.min.js”></script> </head> <body> <input type=“text” ng-model=“name”> <h1>Hello {{name}}</h1> </body> </html>
    12. 12. Who’s using AngularJS? • • • • • • • • Google (of course!) Double Click for Advertisers Youtube And many more Amazon Netflix Banks Lots of startups
    13. 13. Future Plans • A Revamped Change Detection Algorithm • Web Components Interop • A Better Data Persistence story • Awesomer Dependency Injection • Nicer Logging • And a whole lot more
    14. 14. What have I worked with AngularJS on? Prototyping Prototyping EPG Application EPG Application Mail Application Mail Application Wedding & Photography Wedding & Photography E-Commerce, Analytics E-Commerce, Analytics & more & more
    15. 15. Thinking the AngularJS way! or how to get the most out of AngularJS or how to get the most out of AngularJS
    16. 16. “There are many steps to AngularJS Nirvana. Here are some to make sure you get there!” –Me!!
    17. 17. 1. Model is the Truth! Model comes from the server Model comes from the server Controller manipulates it Controller manipulates it View displays it View displays it Need to update the view? Need to update the view? Update the Update the model!! model!!
    18. 18. Tabs in jQuery <ul class="tabs"> <li class="tab1 selected">Tab 1</li> <li class="tab2">Tab 2</li> </ul> <div class="tab1">Content for Tab 1</div> <div class="tab2">Content for Tab 2</div> Plus •Tab highlighting logic •Tab content logic •Not declarative!!
    19. 19. Tabs leveraging Data binding <ul class="tabs”> <li class="tab1" ng-class="{selected: isSelected(‘tab1’)}”>Tab 1</li> <li class="tab2" ng-class="{selected: isSelected(‘tab2')}">Tab 2</li> </ul> <div class="tab1" ng-show="isSelected('tab1')">Content Tab 1</div> <div class="tab2" ng-show="isSelected('tab2')">Content Tab 2</div> $scope.isSelected = function(tab) { return tab === currentTab; };
    20. 20. Tabs in AngularJS Or even better, do this: <tabs> <tab title=“My First Tab”>Tab 1 content here</tab> <tab title=“My Second Tab”>Tab 2 content here</tab> </tabs>
    21. 21. 2. Leverage Data-binding Why do this? <form id="my-form”> <input type="text" id="nameField”> <input type="email" id="emailField”> <button>Submit</button> </form> function setFormValues(userDetails) { $('#nameField').value(; $('#emailField').value(; } // GETTING ALSO… When you can do this? <form id="my-form”> <input type="text" id="nameField” ng-model="”> <input type="email" id="emailField” ng-model="”> <button>Submit</button> </form> $scope.user
    22. 22. 3. DOM Manipulation —> Directives Don’t do this in your controller $('#inputDate').datepicker(); $('#inputDate') .datepicker('getDate'); $('#inputDate') .datepicker('setDate’, '05/23/1975'); Instead, create a directive <input type="text” jqui-datepicker ng-model="startDate” date-format= "DD/mm/YYYY” on-select= ”dateSelected(date)”>
    23. 23. Lack of Lack of compiler compiler Prevent Prevent Regressions Regressions “4.) Test Early, Test Often, and Keep testing” Reduce manual Reduce manual labor, increase labor, increase turnaround turnaround –Some Wise Guru Specification for Specification for the code the code
    24. 24. 5.) Separate Biz. Logic vs Presentation logic Prez. Logic —> Controllers Biz. Logic —> Services • • • • • • how should I fetch data from the server? how do I delete an email? should I allow this action to take place? how should data be cached? should data be returned from my local cache or the server? is this data valid? • • • • making the right service calls to fetch data needed for the view responding to user actions (such as clicks, selections, etc.) modifying the Model (through the scope) to correctly display elements putting the data in the right place for the view to render itself
    25. 25. That’s all, folks!
    26. 26. Do you need Fundoo? Starting out? Starting out? Hands-on AngularjS Hands-on AngularjS Workshops Workshops Need a team? Need a team? Development Development Consulting Consulting Stuck? Need Stuck? Need Advice? Advice? Expert Consulting Expert Consulting
    27. 27. Questions? @omniscient 1 m