See title

1. TDD Your AngularJS +
Ionic Directives With
jQuery
Valeri Karpov
NodeJS Engineer, MongoDB
thecodebarbarian.com
github.com/vkarpov15
@code_barbarian

2. 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

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

4. 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

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

6. 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

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

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

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

10. Main HTML
- See vkarpov15/node-presentation-examples

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

12. Main HTML

13. 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...

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

15. 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

16. Installing Karma

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

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

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

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

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

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

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

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

25. 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”

26. 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

27. 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!

28. Mongoose 4 in Browser JS

29. Form Logic in Mongoose

30. What Should It Do?

31. What Should It Do?

32. What Should It Do?

33. Implementation

34. 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

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

36. 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

37. 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

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

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

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

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

42. 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

43. Thanks for Listening!
Read more at:
thecodebarbarian.com
github.com/vkarpov15
@code_barbarian
github.com/vkarpov15/node-presentation-examples