MEAN Stack NYC Meetup 20150717: TDD Your AngularJS + Ionic Directives With jQuery

TDD Your AngularJS + Ionic Directives With

jQuery

Valeri KarpovNodeJS Engineer, MongoDB

thecodebarbarian.comgithub.com/vkarpov15

@code_barbarian

Who Am I?- NodeJS @ MongoDB- Maintainer for mongoose- + connect-mongodb-session, mongoskin, etc.- Blogger for StrongLoop- Author of Professional AngularJS- And coined the term “MEAN” in 2013

What’s This Talk About?- Good old-fashioned testing pyramid

What’s This Talk About?- Unit Test: tests JS only- Fast, but no real DOM integration- E2E Test: test full stack with DOM integration- Slow, flakey, hard to shard, hard to simulate

errors- “Does my UI actually work?”- Fast feedback on development

What’s This Talk About?- DOM Integration Tests - like Goldilocks

Overview- Directives and Learning from React- Manual bootstrapping in AngularJS >= 1.3.0- Building a form with isomorphic schema- Bonus: compiling for Ionic framework- Lots of high-level concepts - overview of

upcoming EdX course

My Favorite ReactJS Idea- one view != one controller + one HTML blob- views as component trees

This App is Wrong- The “flicker”- Code re-use; need to bring HTML

Using Directives- Use directives as components (web or React)- Or like `@Component` in AngularJS 2

Main HTML- See vkarpov15/node-presentation-examples

Directive + HTML- Testing details: `ng` and `$emit()`- Directive bundles HTML and JS- But not CSS, which is useful for Ionic

Main HTML

Why Components?- No more flicker- Cleaner code separation- Remember when your CS professors yelled at

you for putting all your code in `main()` ?- Easier to test...

Part 2: Testing Directives- Karma: browser instrumentation for testing- (IMO) the most important module on npm- See Testing Client-side JavaScript with Karma

Making Frontend Dev Fast- Getting feedback on frontend work is slow- Make change -> F5 in browser -> open

Chrome console -> click a few buttons -> Feedback

- Karma watches files and re-runs tests for you- Simplify it to: make change -> feedback

Installing Karma

Configuring Karma- Tell Karma files to load and browsers to start- Also tell Karma to start static web server

Configuring Karma- Important: karma only serves templates- So you can test on many browsers in parallel

Instrumenting AngularJS- AngularJS >= 1.3 makes compiling HTML easy- Steps: create injector, create scope, $compile() HTML with new scope

Now You Can Test- Tests use jQuery to manipulate DOM- .trigger(‘change’) triggers $apply- $apply is sync, so test is sync

Fast Feedback with TDD- Suppose you wanted to add a ‘clear’ button- You could point and click…- Or you could write a test first

Fast Feedback with TDD- When you save, karma yells at you

Fast Feedback with TDD- When you save, karma yells at you

Fast Feedback with TDD- But when you add a button and a function...

Fast Feedback Takeaways- Tests are light and fast- Also include DOM integration- Best of both worlds between unit and e2e- More detail on my blog: “Testing AngularJS

Directives”

Fast Feedback Takeaways- TDD is hard. Like lifting heavy weights.

“The resistance that you fight physically in the gym and the resistance that you fight in life can only build a strong character.”

- Arnold Schwarzenegger

Part 3: TDDing a Form- Mongoose (NodeJS ODM for MongoDB) is

partially isomorphic as of v4.0.0- More detailed article: “Better AngularJS Form

Validation with Mongoose”- Lets you share validation logic between client

and server- Never maintain two code bases in parallel!

Mongoose 4 in Browser JS

Form Logic in Mongoose

What Should It Do?

What Should It Do?

What Should It Do?

Implementation

Key Takeaways- Validation logic is easy to get wrong- Write once, test carefully

“If you want more effective programmers, you will discover that they should not waste their time debugging, they should not introduce the bugs to start with.”

- Edsger Dijkstra of Dijkstra’s Algorithm

Part 4: Compiling for Ionic- Don’t worry, this section will be short- Ionic = AngularJS on Cordova- Hybrid native apps

I Hate Native Mobile Dev- Worst of both worlds between Swing and

HTML- Feedback cycle is slow: make change ->

compile -> wait… -> click around in simulator

Directives First with Ionic- Ionic lets you write mobile apps in Angular- Write directives once, re-use them on mobile- Mobile dev without the slow feedback

What’s Tricky about Ionic?- Mobile apps are downloaded once- Shouldn’t use HTTP to load templates

Directives in Ionic- Use gulp-html2js- Designed to compile template HTML into JS

Directives in Ionic- One gulpfile and directive is ready for Ionic!

Directives in Ionic- Very high-level overview- EdX course goes into much more detail

More Resources- Sample code at github.com/vkarpov15/node-

presentation-examples- Professional AngularJS on Amazon- Upcoming Video Course on EdX - fill out

survey to be a beta tester!- MongoDB community survey

Thanks for Listening!Read more at:

thecodebarbarian.comgithub.com/vkarpov15

@code_barbariangithub.com/vkarpov15/node-presentation-examples