Angular State Container ES6+ TypeScript Linter UI kit Unit Test Webpack VS Code Take away + Demo

1. HIGH TECH
HIGH CODE QUALITY
HIGH PERFORMANCE
HIGH SCALABILITY
HIGH MAINTAINABILITY
Single
Page
App

2. SE XY A N G U L A R STA CK
C U R I O U S C A S E S
by @ c u o n g t r u o n g

3. Hello!
I am Cuong Truong
FEArchitect/Scrum Master at #ITCGroup
I am here because I love to share knowledge
You can contact me via
cuongtruong.info@gmail.com

4. #Frontend 2018

5. Angular
State Container
ES6+
TypeScript
Linter
UI kit
Unit Test
Webpack
VS Code
Takeaway + Demo
Agenda

6. #Framework for building SPA
Uni-directional data flow
Across all platforms
Server-side rendering
Modern, Smaller & Faster
#Cheat Sheet
ANGULAR

7. Do events
Repaint the
DOMDo layout
Recalculate
the CSS
Every time DOM changes, browser needs to
TAKESTIME
TRADITIONAL WAY

8. Modifies DOM when MODEL changed
ANGULAR WAY
1
USE “1-WAY”
Unidirectional Data
Flow
BATCH
Update bindings,
execute all changes
COMPUTE
minimal set of changes
cause DOM to be updated
RUN
change detection on
the Model
2
34
BETTER PERFORMANCE

9. No controllers
No models
No directives
No global eventlisteners
Everything is <Component/>
#Thinking in Angular

10. component
template
</>
metadata
property
binding
event
binding
component component
module
component component
directive
metadata
- component
- structural
- attribute
injector
service
#Anguar vsReact#Benchmarks

11. THINKING IN
ANGULAR
- App
- HomePage
- Header
- SearchBar
- EmployeeList
- EmployeeListItem
- EmployeePage
- Header
- EmployeeDetails

12. A solution for concurrent
data modification by
multiple actors
A client containerfor
temporary UI state.e.g.
A client cache for
avoiding excessive HTTP
requests
If you need
HOW TOMANAGE
FRONTEND
LOGIC or
wizard, shopping cart, … APPLICATION
STATE EFFECTIVELY?

13. @ngrx/store
application state manager
for Angular applications
UNIDIRECTIONAL DATAFLOW
IMMUTABLE
Redux + Observable

14. Component
StoreReducers
Actions
Effects
NEW
STATE
SELECTOR
S
ACTIONS
AP
I
Services
DISPATCH

15. @ngrx/store
vs
services

16. => {}
Let + Const
const myObject = {propA, propB}
Arrow function, Default
const myFunction = (arg = ‘value’)
Class
export class MyClass {constructor(){}}
Module
import {MyClass} from ‘my/path’
Template String
const tps = `Template string with ${…}`
#ES6 #Mozilla #ES-Next
ECMAScript 6+
Destructuring
= myObjectconst {propA, propB}
Rest, Spread …
Promise
myPromise.then().then().catch()
Async/Await
const myFunction = async () => {await…}
Decorator
@myDecorator
class MyClass {…}

17. Static type checker for JS
strong/statically typed advantages
Strong tool for LARGE app
covers 100% of code
catches incorrect assumptions
e.g. numbers represented as strings
Provides advanced
autocompletion / intellisense
navigation
safe refactoring
TypeScript
#WhyTypeScript

18. My Recommendation
project does not live for long
project is really simple
people enter or leave your team frequently
there is a chance you will need to refactor the thing
system is very important or even crucial for the success
of company

19. discovers problems
with TypeScript code
without executing it
Coding conventions
Readability
Maintainability
Functionality errors
TSLint/ESLint
#TSLint #ESLint

20. FAKER
Some other mocking/
#faking data/api calls
ISTANBUL
JS #code coverage tool
SINON
Test #spies, stubs &
mocks for JavaScript
Front-end Unit Test
KARMA
Spectacular #test
runner for JavaScript
MOCHA
Feature-rich JavaScript
#test framework
CHAI
BBD/TDD
#assertion library
#Protractor

21. Ng Bootstrap Material UI
Build yourself ?!
#BEM #SMACSS #MVCSS

22. Bundles your
Scripts
Styles
Assets
Images
WEBPACK
Configuration object
Resolves dependencies
Hot reloading
Tree-shaking
Cache busting/hashing system

23. WEBPACK
ENTRY POINTS
single entry
multiple page
app
separate app & vendor
MORE INFORMATION
WEBPACK
LOADERS
style | css | sass| scss| …
babel | typescript | flow |
… html | template | pug |
… url | file | raw | …
module | bundle-loader
MORE INFORMATION
WEBPACK
PLUGINS
CopyWebpackPlugin
CompressionWebpackPlugin
HtmlWebpackPlugin
CircularDependencyPlugin
CommonsChunk
MORE INFORMATION

24. folder structure?

25. FOLDER
STRUCTURE

26. take away

27. Pros
One framework to rule them all
Full control/easy to manage coding flow
Building reusable code/components
Testable
Readable
Maintainable
Performance
Developer experience/community
Server-side rendering => SEO
Size is smaller after each release

28. Cons
Learning curve
Need to keepconventions/boilerplate
Need to care aboutperformance
All in One framework for small app

29. My Recommendation
People are a part of solution
Keep conventions / commitments
Strategies for managing dependencies
Take care about architecture and configurations
Write small & pure functions as much as possible
Write meaningful unit test as much as possible
Don’t USE if you don’t NEED or UNDERSTAND it

30. References
#DemoSourceCode
#JSCodingStandards
#AngularStyleguide
#Nx - MicroArchitecture
#Redux
#ReduxDevTools
#Entities
#TypeScript #Cheatsheet
#SASS
#BEM & SMACSS #MVCSS
#Babel
#ESLint #TSLint
#Karma #Mocha #Chai #Sinon
#Webpack
#javascripting

31. Q&A

32. 0.99365 = 0.02552
0.999365 = 0.69407
1365 =
1.001365 = 1.44025
1.002365 = 2.07357
1.01365 = 37.7834
1.02365 = 1377.40

33. @CuongTruong
cuongtruong.official@gmail.com