How to elevate your team to take advantage of Angular and technologies in it's ecosystem to help you work better

1. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure.
Eric Bishard
Twitter:
LinkedIn: linkedin.com/in/
Front End UI/Component Developer, UX Student for life
1

2. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure.
Front-End Architecture:
Angular 5, CLI, Ngrx,
What we’ll Cover:
• What to focus on when Getting Started
• Using the CLI
• Testing and Linting in CLI
• Services and Observables
• Ngrx Store
• Example project w/ Redux
Agenda

3. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 3
What I mean when I say Elevate?
Taking it to the next level
• Learn the fundamentals and revisit often
• Understand and when to apply them
• Become an advocate and implement
• Attend and Present at meetups
• Keep Angular up to date and understand the changes
• Continue advancing your skills constantly

4. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 4
Write Maintainable and Documented code
Bringing the “Bus Factor” Down
• Requirements and tests should drive our development
• Use patterns rather than obscure coding techniques
• Don’t silo yourself and build in isolation from your team
• If something feels complex break it apart
• Can a new hire get right to work?

5. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 5
Build Smart From the Beginning
Building and test UI in isolation w/mock data
• Understand component composition
• Use services with mock data for offline development
• Understand requirements for inputs and outputs
• Work out functionality before finalizing style
• Build mockups or at least wireframes using research
• Don’t build reusable components in place

6. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 6
Unlike Angular 1.x, it’s no more MV★
It’s components all the way down
• Use one–way-data-flow avoid two way binding
• Use Reactive Forms not Template Driven Forms
• Avoid deeply nested components
• Put logic in the right place
• Watch for dependency overload and apply single responsibility

7. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 7
Use The CLI
And save time & money
• Generate a new project with (Sass & Routing)
• Use instead if you are in an existing directory
• Generate a module, comp, class, service, pipe, directive or enum
• Test frameworks are in place with and
• Develop linting rules and use them with
• Experiment with or
• Build and deploy using development vs production
• Eject your application if needed

8. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 8
Use The CLI
And save time & money
• By running `ng generate MyComponent` the CLI wires your
component to the module
• These commands save a lot of time
• You can do things like omit the spec file with `--spec=false`
• You can ensure a component is not created inside a directory btu
instead created as a flat set of files with --flat

9. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 9
Linting in the CLI
Configurable out-of-the-box
• Allows configuration of rules and formatters
• Configuration through the file in root
• Checks TS for code readability, maintainability and functionality
• Enforce team standards with easy opt-in and opt-out rules
palantir.github.io

10. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 10
Examples of Lint Warnings
On a recently completed pipe
1. If Pipe decorator used, should implement interface
2. Implement for method
3. Expected nospace before colon in call-signature
4. Identifier 'limit' is never reassigned; use instead of
5. Type trivially inferred from boolean literal, remove annotation
6. Forbidden keyword, use or instead
7. If statements must be braced
8. should be
9. Import is blacklisted, import a submodule instead
10. Declaration of instance field after declaration of instance method.

11. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 11

12. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 12

13. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 13

14. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 14

15. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 15

16. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 16

17. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 17

18. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 18
Ngrx Store
Principals & Core Concepts
• Single Immutable State Tree (POJO)
• Predictable & Maintainable
• Complemented by TDD
• Time Travel Debugging
• One way data flow
• Reliable updates to state

19. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 19
Ngrx Store
Principals & Core Concepts
• Derive properties from state
• Dispatch actions to change state
• Immutable operations to update state
*Think: array.map()

20. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 20
Ngrx Store
Principals & Core Concepts
• We dispatch actions
• Trigger side effects
• Reducers update and return state
• Reducers do not mutate state outside of it's function
• Reducers are pure and reliable functions
*Think: sum(a,b)

21. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 21

22. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 22
x
In short:

23. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 23
x
What it solves:

24. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure.
>npm install / yarn install
>npm start / yarn start
Simple Redux App in TypeScript
24

25. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 25
Links for this talk:
Sample App (TypeScript Implementation of Redux)
Redacted for public slide deck
Intro to Observables (rxjs, MDN)
codepen.io/httpJunkie/pen/RjVMzY
Resources
UltimateAngular.com, Pluralsight.com, TSLint, Angular CLI, Ngrx Store &
Effects, State Management with Ngrx, Reactivex.io, Ngrx Store