Valeri Karpov MongoDB - NodeJS Engineer Tuesday, Oct 20th 11:25 am - Front-End/Back-End Dev Find more by Valeri Karpov: http://www.slideshare.net/vkarpov15/

1. Conquering AngularJS
Limitations
Valeri Karpov
Node.js Engineer, MongoDB
thecodebarbarian.com
github.com/vkarpov15
@code_barbarian
Turning Common Pain Points into Strengths

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. 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. 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. 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. Setting Up A Basic SPA

7. Setting Up A Basic SPA

8. Express Web Server
•Can use nginx, python, etc.
•But easier with Express :)
•Render root view always because of HTML5 mode

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. Google AJAX Crawling
•Meta tag tells Google to re-send request
•Adds _escaped_fragment_ query parameter

11. Plugging Prerender In
•One-liner for Express

12. Prerender in Action

13. Fetch as Google
•Handy tool for making sure Google can crawl

14. Fetch as Google
•Crawl as Google doesn’t check meta tag for you

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. 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. 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. 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. A Tale of Two Directives
•2 directives that toggle visibility
•Which one is more responsive, option A...

20. A Tale of Two Directives
•Or option B?

21. Directive B!
•Directive A is “state-based”
•Directive B is “reactive”
• Can target directive B with media queries

22. Scopes as Event Emitters
•Tragically underused AngularJS feature
•Scopes are powerful scoped event emitters!
•Directives are great for listening to scope events

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. 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. Part 3: Integration Testing
- Good old-fashioned testing pyramid
????

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. 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. 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. Directive to Test
•Good ol’ toggle visibility directive B
•Huzzah, code re-use

30. Test Setup
•Karma - “launch a browser, load these files, report
output to shell”

31. Karma Config File
•Launch Google Chrome
•Load a bunch of files, including mocha + chai
•Report results to stdout

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. Bootstrapping Directives
•New in AngularJS 1.3
•$compile service “Angularizes” HTML

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. 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. Thanks for Listening!
Comments, questions, haikus?
Read more at:
thecodebarbarian.com
github.com/vkarpov15
@code_barbarian