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