The document discusses strategies for addressing common AngularJS challenges including SEO, responsive design, and integration testing. It recommends using Prerender.io to generate static HTML for search engines to index Single Page Apps. For responsive design, it suggests using reactive directives that emit events in response to screen size changes rather than having directives know about screen size. Finally, it outlines an approach to integration testing AngularJS directives in isolation using Karma and bootstrapping directives for testing DOM logic.
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?
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
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...
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?)
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
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
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