Make frontend development radical with Angular

Transcript

1. ANGULAR MAKE FRONTEND DEVELOPMENT RADICAL WITH
2. I’M IAN
3. I’M IAN I BUILD FAITHLIFE
4. I’M IAN I BUILD FAITHLIFE I LIKE STUFF RADICAL
5. THINGS THAT ARE RADICAL: Fewer Bugs Less Code Fast Development
6. WHAT ANGULAR OFFERS: Routing Data Binding Controllers Dependency Injection Form Validation Reusable HTML Components
7. WHAT ANGULAR OFFERS: Some other stuff too.
8. OK, that’s a lot to cover in one talk.
9. IN A NUTSHELL It’s a frontend JavaScript framework for building testable, manageable code.
10. The good thing about Javascript: it’s really flexible. The bad thing about Javascript: it’s really flexible.
12. Manually manipulating the DOM is like assembly programming
14. We’ve solved this problem before.
15. Why not MVC? Model View Controller
16. Model (Plain old Javascript object) View (HTML) Controller (JavaScript)
17. Controller
18. Controller
19. $scope exposes data/ functions to views
20. View
21. Surprise! It’s just HTML5.
22. Models really are just plain old JavaScript objects.
23. Where’s the magic?
24. Dependency injection + Two-way data binding
25. Dependency injection Specify dependency sources, Angular wires them up for you.
26. Dependency injection Angular inspects function argument names to look for the value to inject.
27. Dependency injection
28. Two-way data binding Values in $scope are exposed to both the controller and the view.
29. Two-way data binding Modifications from one propagate to the other.
30. Two-way data binding Scopes are inherited
31. Two-way data binding Scopes trigger updates when observed values change
32. Two-way data binding
33. Directives
34. Directives Add behavior to HTML with classes, new elements, & new attributes.
35. Directives Inspired by W3C’s Web Components working drafts.
36. Directives One of Angular’s killer features.
37. “Gee, I wish HTML could...” Support dropdown menus Have syntax-highlighted text editing Have relative timestamps
38. Now it does! <sharks-with-lasers />
39. Directives The only place you should ever need to write a line of code that manipulates the DOM
40. Testing Dependency injection makes that a lot easier. Separation of concerns is the key!
41. Testing Run unit tests and integration tests across multiple browsers. Angular has a ridiculously fast test runner, Karma.
42. Testing Built in mocks for common test scenarios: AJAX requests Dates Logging
43. Testing Built in end-to-end testing support
44. Not covered in this talk: Internationalization & localization Filters Partial templates CSS3 animation & transitions
45. QUESTIONS?