Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Conquering AngularJS Limitations

405 views

Published on

Turning common AngularJS pain points into strengths. All Things Open 2015.

Published in: Technology
  • Be the first to comment

Conquering AngularJS Limitations

  1. 1. Conquering AngularJS Limitations Valeri Karpov Node.js Engineer, MongoDB thecodebarbarian.com github.com/vkarpov15 @code_barbarian Turning Common Pain Points into Strengths
  2. 2. Who am I? - AngularJS user since v0.9.4 (Dec 2010) - Author of Professional AngularJS - Currently working on an Ionic framework blog series for StrongLoop
  3. 3. What is This Talk About? •AngularJS is easy to get started with •But there are some sticking points after PoC • SEO • Responsive layouts • Integration testing
  4. 4. Part 1: Crawling a SPA •Problem with JS-heavy pages •Google only crawls HTML •Appealing aspect of isomorphism (e.g. React) •What to do with an AngularJS SPA?
  5. 5. Introducing Prerender •Prerender.io •Prerenders your page with PhantomJS for Google •Easy to plug into Express, nginx, etc. •Can pay for SaaS or host your own (open source!)
  6. 6. Setting Up A Basic SPA
  7. 7. Setting Up A Basic SPA
  8. 8. Express Web Server •Can use nginx, python, etc. •But easier with Express :) •Render root view always because of HTML5 mode
  9. 9. Google AJAX Crawling •Detailed spec by Google •Note: recently deprecated after I wrote this talk •With current setup, we only need one line • HTML5 mode • Express rendering root view for all routes • And then we will add Prerender
  10. 10. Google AJAX Crawling •Meta tag tells Google to re-send request •Adds _escaped_fragment_ query parameter
  11. 11. Plugging Prerender In •One-liner for Express
  12. 12. Prerender in Action
  13. 13. Fetch as Google •Handy tool for making sure Google can crawl
  14. 14. Fetch as Google •Crawl as Google doesn’t check meta tag for you
  15. 15. Why’s Prerender Good? •Server-side rendering is hard in general for a SPA •SPA’s do a lot of extra HTTP requests • Stub them out? • Let server make HTTP requests to itself? •Angular 2.0 will do better
  16. 16. Why’s Prerender Bad? •So slow •window.prerenderReady helps •In practice, you just cache it •Prerender-node has good caching support • In Amazon S3 • In server memory (risky)
  17. 17. Takeaways from Part 1 •Prerender makes SEO easy for AngularJS •Or for any other non-isomorphic templating lib •Plug and play with Express or nginx • Also easy with koa if you use thunkify •Detailed guide in Professional AngularJS Chapt 6 •But we live in a post-Mobilemageddon world •What about responsiveness in AngularJS?
  18. 18. Responsive Layouts •Layouts that reshape based on screen size •Show/hide elements for small screens •AngularJS is mostly “state-based” •Scope variables determine what is displayed • Controller needs to know about screen size :( • JS and CSS need to be in sync
  19. 19. A Tale of Two Directives •2 directives that toggle visibility •Which one is more responsive, option A...
  20. 20. A Tale of Two Directives •Or option B?
  21. 21. Directive B! •Directive A is “state-based” •Directive B is “reactive” • Can target directive B with media queries
  22. 22. Scopes as Event Emitters •Tragically underused AngularJS feature •Scopes are powerful scoped event emitters! •Directives are great for listening to scope events
  23. 23. Responsiveness Principle •Use reactive for responsive layout elements •Show/hide on events means media queries work •Use state-based for URL changes •(Probably) no overlap between the two •You need both reactive and state-based
  24. 24. Part 2 Takeaways •Directives will get run everywhere (Ionic) •AngularJS code can be reactive •Pretty useful for responsive layouts •Directives should not know about screen size • Re-usability • Separation of concerns • Performance ($digest loop on resize?)
  25. 25. Part 3: Integration Testing - Good old-fashioned testing pyramid ????
  26. 26. Why Integration Tests •Unit test: JS only •Fast, but no DOM integration •E2E test: full stack with DOM integration •Slow, flakey, hard to shard and simulate errors •“Does my UI actually work?” •Fast feedback on development
  27. 27. How The Tests Will Work •Test individual directives •Directives easy to instantiate using $compile •Run using Karma • PhantomJS • Sauce Labs •Stub out HTTP so we can shard easily
  28. 28. How The Tests Will Work •Test individual directives •Directives easy to instantiate using $compile •Run using Karma • PhantomJS • Sauce Labs •Stub out HTTP so we can shard easily
  29. 29. Directive to Test •Good ol’ toggle visibility directive B •Huzzah, code re-use
  30. 30. Test Setup •Karma - “launch a browser, load these files, report output to shell”
  31. 31. Karma Config File •Launch Google Chrome •Load a bunch of files, including mocha + chai •Report results to stdout
  32. 32. More About Karma •Karma is a very deep subject •Avoid going into too much detail in this talk •See Chapter 9 of Professional AngularJS •Testing Client Side JavaScript with Karma on thecodebarbarian.com
  33. 33. Bootstrapping Directives •New in AngularJS 1.3 •$compile service “Angularizes” HTML
  34. 34. JQuery Tests •Now you have an HTML element, you can • click • blur • or any other DOM event •Also access AngularJS scopes, httpBackend, etc. •Everything from TDD talk yesterday applies :)
  35. 35. Part 3 Takeaways •Bootstrapping directives for tests is easy in >= 1.3 •Good for testing logic in AngularJS HTML •Helps complete the picture for AngularJS testing •Can also test SEO integration if you use Prerender
  36. 36. Thanks for Listening! Comments, questions, haikus? Read more at: thecodebarbarian.com github.com/vkarpov15 @code_barbarian

×