[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
Download as PPTX, PDF1 like3,164 views
AngularJS is currently at the forefront of MVC (Model View Controller) frameworks for the web, and it makes it very simple to develop prototypes and web applications in it. But how do we ensure that the large scale applications we develop remain high performance, bug free and fast? In this webinar, our speaker shared his learnings from developing various large scale AngularJS applications. He also shared how to create a maintainable project structure, and cover common performance bottlenecks and best practices to follow. Watch complete webinar recording: http://youtu.be/b92Y77TExiA
![[Webinar] Scientific Computation and Data Visualization with Ruby](https://cdn.slidesharecdn.com/ss_thumbnails/srijantalk-160630120551-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
![[Srijan Wednesday Webinars] Building Full-Fledged Native Apps Using RubyMotion](https://cdn.slidesharecdn.com/ss_thumbnails/webinarsrijan-160602051211-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] The Fundamentals of ReactJS](https://cdn.slidesharecdn.com/ss_thumbnails/reactwednesdaywebinar-160728095010-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Strategies to Help You Scale Agile](https://cdn.slidesharecdn.com/ss_thumbnails/scaledagileframework-agilebuddha-final-140219052458-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinar] Mastering Drupal 8 Development with Drupal Console](https://cdn.slidesharecdn.com/ss_thumbnails/srijan-mastering-d8-development-160616095247-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinar] Easy Performance Wins for Your Rails App](https://cdn.slidesharecdn.com/ss_thumbnails/rubyperformancewebinar-160811073147-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Transitioning to an Organization-wide Agile Culture](https://cdn.slidesharecdn.com/ss_thumbnails/organizationaltransformationtoagile-161027100144-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Unraveling Drupal as a Versatile Enterprise Solution](https://cdn.slidesharecdn.com/ss_thumbnails/shyamala-150916171702-lva1-app6891-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Meet Commerce 2.X](https://cdn.slidesharecdn.com/ss_thumbnails/srijanww-meetcommerce2-160309171959-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Ruling Drupal 8 with #d8rules](https://cdn.slidesharecdn.com/ss_thumbnails/d8rulessrijanwebinarapril2016-160421035926-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Why Enterprises Should Embrace Distributed Agile ...](https://cdn.slidesharecdn.com/ss_thumbnails/whyenterprisesshouldembracedistributedagileteams-160908102944-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinar] Rails 5: What's in It for Me?](https://cdn.slidesharecdn.com/ss_thumbnails/rails5webinar-160408072508-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Native CRM Systems on Drupal: Now & in the Future](https://cdn.slidesharecdn.com/ss_thumbnails/srijanwednesdaywebinarsdrupalcrm2015-151217053440-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] NASA, Netflix, Tinder: Digital Transformation and...](https://cdn.slidesharecdn.com/ss_thumbnails/node-170126155947-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://cdn.slidesharecdn.com/ss_thumbnails/drupal8-theming-webinar-150806150902-lva1-app6892-thumbnail.jpg?width=560&fit=bounds)
Ad
Similar to [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS (20)
Ad
More from Srijan Technologies (20)
![[Srijan Wednesday Webinar] How to Run Stateless and Stateful Services on K8S ...](https://cdn.slidesharecdn.com/ss_thumbnails/webinarbyadheip-190829125159-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] How to Set Up a Node.js Microservices Architectur...](https://cdn.slidesharecdn.com/ss_thumbnails/webinarbywilson-190221124622-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] How to Build a Cloud Native Platform for Enterpri...](https://cdn.slidesharecdn.com/ss_thumbnails/srijanwwcloudnativeplatformfordrupal-181213101558-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Using Drupal as Data Pipeline for Digital Signage](https://cdn.slidesharecdn.com/ss_thumbnails/2018-srijanwebinardatapipelines-180607133946-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] New Recipe of Decoupling: Drupal 8, Symfony and S...](https://cdn.slidesharecdn.com/ss_thumbnails/webinarwithjyotisingh1-180426112348-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Let’s Take the Best Route - Exploring Drupal 8 Ro...](https://cdn.slidesharecdn.com/ss_thumbnails/webinarbysurbhi-180405093703-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Is Your Business Ready for GDPR](https://cdn.slidesharecdn.com/ss_thumbnails/webinartemplateformatt-180125105251-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Artificial Intelligence & the Future of Business](https://cdn.slidesharecdn.com/ss_thumbnails/disrupt4-171207140409-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] How to Design a Chatbot that Works](https://cdn.slidesharecdn.com/ss_thumbnails/webinarbyjess-171012044154-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Simplifying Migration to Drupal 8](https://cdn.slidesharecdn.com/ss_thumbnails/webinarbysugandh-170817143543-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinar] Leveraging the OGD Platform and Visualization Engine](https://cdn.slidesharecdn.com/ss_thumbnails/webinar-leveragingtheogdplatformandvisualizationengine-28-6-20171-170630114628-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Why Adopt Analytics Driven Testing](https://cdn.slidesharecdn.com/ss_thumbnails/srijanwednesdaywebinarsanalyticsdriventesting2-170615131224-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinar] Key ingredients of a Powerful Test Automation System](https://cdn.slidesharecdn.com/ss_thumbnails/webinarbynitin-170406054723-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinar] Building BPMN Web Portals with Camunda and Drupal](https://cdn.slidesharecdn.com/ss_thumbnails/srijanwebinarbyishan-170323055342-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinar] Decoupled Demystified: The Present & Future of Dr...](https://cdn.slidesharecdn.com/ss_thumbnails/srijanwebinartemplatebypreston-170310083838-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Automating Visual Regression using ‘Galen’](https://cdn.slidesharecdn.com/ss_thumbnails/swwbysoumyajitanddeepshikha-170210122854-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Building a High Performance QA Team](https://cdn.slidesharecdn.com/ss_thumbnails/srijan2016karim-161117105408-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinar] Mastering Mobile Test Automation with Appium](https://cdn.slidesharecdn.com/ss_thumbnails/srijan-webinar-161103125140-thumbnail.jpg?width=560&fit=bounds)
![[Srijan Wednesday Webinars] Opportunities and Challenges in Enterprise UX Design](https://cdn.slidesharecdn.com/ss_thumbnails/opportunitiesandchallengesinenterpriseuxdesign-161006091903-thumbnail.jpg?width=560&fit=bounds)
Recently uploaded (20)
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
- 1. Developing Large Scale Applications in AngularJS Yes, it’s possible! Shyam Seshadri CEO, Fundoo Solutions (http://www.befundoo.com) @omniscient1
- 2. AngularJS – It’s not just for toy apps
- 3. Who am I? Entrepreneur http://www.befundoo.com Xoogler Author
- 4. Currently @ AngularJS & NodeJS • Architecture Consulting • Development Consulting • Hands-on Workshops Product Development • Mobile & Web Evangelism • Latest & Greatest Technologies
- 5. Agenda AngularJS – Why it’s amazing The difference between a small and large app Structuring your AngularJS Project Common Bottlenecks in Web Applications Speeding up your web application
- 6. AngularJS – 5 great things • Less code, more work - Data Binding • HTML for templating – Directives • Separating your concerns – MVC • Ease of testing – Karma, Jasmine, Protractor • Brilliant community – Anywhere, Everywhere
- 7. When an app grows too big Small App (~1000’s LOC) • Tiny, Fast • Easy to develop • Testing is trivial • Simple project structure works Large App (~10K-50K LOC) • Large • Can quickly become unmaintainable • Can be prone to bugs • Project Structure hard to scale if base is not good • Testing requires thought
- 8. Structuring a Large AngularJS Project High Level Thoughts • Modular approach • Independent, reusable modules • All necessary files together • Conceptually • Components – Reusable, not specific to a view • Sections – Controllers, HTML, directly for a view • Tests right beside the code
- 9. A Sample Large App Structure ChallengeApp • components • auth • auth.service.js • auth.service_spec.js • ui • fileupload • fileupload.directive.js • fileupload.directive.tpl.html • fileupload.directive.css • fileupload.directive_spec.js
- 10. A Sample Large App Structure ChallengeApp • sections • home • home.html • home.controller.js • home.controller_spec.js • home.css • list • list.html • list.controller.js • list.controller_spec.js • list.css • app.js • main.css • index.html
- 11. How to write slow web applications Load lots of scripts and css (in head!) Slow subsequent loads Heavy DOM Rendering / Manipulation Bad CSS Angular – Too many watchers / scopes
- 12. The Easy stuff • Load CSS in HEAD • Load JS at end of BODY Order • Concat/Minify/Gzip files and then load • Not too many parallel requests • Lazy load if too many / too large files Network • Reduce content in UI • Reduce watchers / expensive bindings DOM
- 13. A Quick Case Study - EPG • Program Grid (x by y) • 500 channels • 14 days, half hour slots EPG • Smooth scrolling • Minimal Loading indicators / stops • Different states for each program • IE8 Support Requirement
- 14. First Attempt at EPG • ng-repeat within ng-repeat • ng-class & ng-bind for all program data • Load data upfront • Time to render : ~6 seconds!!! • http://plnkr.co/edit/BLFb1O?p=preview • With polling to refresh the data • http://plnkr.co/edit/SebQIW?p=preview
- 15. The Bottlenecks Initial Data Load ng-repeat not optimal for large data sets DOM manipulation & Re-rendering # of watchers
- 16. Analyzing the ng-repeat effect • What if we completely dropped ng-repeat? • Use jQuery and manual HTML manipulation • Would things speed up? • http://plnkr.co/edit/mVpuPu?p=preview
- 17. Simple Optimizations in AngularJS Use track by syntax with ng-repeat bindOnce if data is not going to change ng-if over ng-show/ ng-hide Reduce watchers / bind expressions
- 18. Optimizing the Grid – What we did • Data was fetch & display • Did not change after initial load • Moved to custom directive without ng-bind & ng-repeat • Lazy Loading • Placeholders for content out of view • Load as and when needed • Cache Priming • Preload views beside current as & when time permits
- 19. Things to keep in mind • CSS / JS Minification • Lazy Loading, if needed • Proper structure & build process upfront Build / Deploy • Avoid too many parallel requests • Gzip / Caching strategies • Cache Priming Network • Reduce DOM elements in UI • Reduce watchers / expensive bindings • Data-binding – Use bind-once when possible DOM
- 20. Thank You! Shyam Seshadri Fundoo Solutions @omniscient1
Editor's Notes
- #3: Grown from a side project for one engineer to a fulltime revolution in the arena of web development
- #7: Boilerplate removed. 1000’s of lines of code less HTML, no new templating language like XML. Extend HTML with new components Modular architecture. Separation of concerns, Lets one focus on functionality, or UI. Model driven Testing first, focus on TDD from the start. Dependency Injecton
- #11: App specific vs function specific. Auth, Widgets can be reused from components UI, controllers possibly reusable between mobile and web.
- #12: Script = blocking Parallel request limit Gradients, etc Each watcher + DOM manipulation might take ms, but 1000 of those add up
- #15: Non starter, dead on arrival. Had to rework it completleyhap://plnkr.co/edit/SebQIW?p=preview
- #17: Non starter, dead on arrival. ng-repeat does a dom manipulation for each individual element. Those add up quickly for large lists
- #19: Non starter, dead on arrival. Had to rework it completleyhap://plnkr.co/edit/SebQIW?p=preview