Conquering AngularJS Limitations
-
Upload
all-things-open -
Category
Technology
-
view
384 -
download
0
Transcript of Conquering AngularJS Limitations
Conquering AngularJS Limitations
Valeri KarpovNode.js Engineer, MongoDB
thecodebarbarian.comgithub.com/vkarpov15
@code_barbarian
Turning Common Pain Points into Strengths
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
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
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?
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!)
Setting Up A Basic SPA
Setting Up A Basic SPA
Express Web Server•Can use nginx, python, etc.
•But easier with Express :)
•Render root view always because of HTML5 mode
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
Google AJAX Crawling•Meta tag tells Google to re-send request
•Adds _escaped_fragment_ query parameter
Plugging Prerender In•One-liner for Express
Prerender in Action
Fetch as Google•Handy tool for making sure Google can crawl
Fetch as Google•Crawl as Google doesn’t check meta tag for you
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
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)
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?
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
A Tale of Two Directives•2 directives that toggle visibility
•Which one is more responsive, option A...
A Tale of Two Directives•Or option B?
Directive B!•Directive A is “state-based”
•Directive B is “reactive”
• Can target directive B with media queries
Scopes as Event Emitters•Tragically underused AngularJS feature
•Scopes are powerful scoped event emitters!
•Directives are great for listening to scope events
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
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?)
Part 3: Integration Testing- Good old-fashioned testing pyramid
????
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
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
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
Directive to Test •Good ol’ toggle visibility directive B
•Huzzah, code re-use
Test Setup•Karma - “launch a browser, load these files, report output to shell”
Karma Config File•Launch Google Chrome
•Load a bunch of files, including mocha + chai
•Report results to stdout
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
Bootstrapping Directives•New in AngularJS 1.3
•$compile service “Angularizes” HTML
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 :)
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
Thanks for Listening!Comments, questions, haikus?
Read more at:thecodebarbarian.comgithub.com/vkarpov15
@code_barbarian