A short introduction to Angular (6) World and to the speakers of the event

1. #angularday
ANGULARDAY2018
FABIOBIONDI.io

2. fabiobiondi.io
TRAINING AND MENTORING
#angularday

3. #angularday
ANGULAR JAVASCRIPT REACT
OPPORTUNITÀ per DEVELOPER ITALIANI
(jobs / collaborations / training and more)
FACEBOOK GROUPS
developer italianideveloper italianideveloper italiani

4. #angularday
GADGETS
• ANGULAR T-SHIRTs
• ANGULAR Stickers, Magnets, Buttons
• 3 JetBrains 1year Subscription

5. #angularday
OFANGULAR6
THEAMAZINGWORLD

6. #angularday
ANGULARJS
IS NOT
ANGULAR

7. #angularday
ANGULAR IS FAT!

8. #angularday
WHYI ANGULAR
• TYPESCRIPT
• COMPONENT BASED
• DEPENDENCY INJECTION
• PIPES & DIRECTIVES
• REACTIVE FORMS
• TEMPLATE DRIVEN FORMS
• ROUTER / LAZY LOADING
• LOCAL CSS e SHADOW DOM
• i18n
• XHR & INTERCEPTORS
• ANGULAR CLI
• REACTIVE (RXJS) & OOP
• TESTABILITY
• REDUX “READY”
• SSR (server side rendering)
• LTS (long term support)
• MOBILE (Ionic & Native Script)
• PERFORMANCE
• COMMUNITY & ECOSYSTEM

9. #angularday
WHAT IS REACT?
• TYPESCRIPT
• COMPONENT BASED
• DEPENDENCY INJETION
• PIPES & DIRECTIVES
• REACTIVE FORMS
• TEMPLATE DRIVEN FORMS
• ROUTER / LAZY LOADING
• LOCAL CSS e SHADOW DOM
• i18n
• XHR & INTERCEPTORS
• REACT CREATE APP (CLI)
• REACTIVE (RXJS) & OOP
• TESTABILITY
• REDUX READY (NGRX & NGREDUX)
• SSR (server side rendering)
• LTS (long term support)
• MOBILE (React Native)
• PERFORMANCE
• COMMUNITY & ECOSYSTEM

10. #angularday
ANGULAR6

11. PROGRESSIVE WEBAPPS
#angularday

12. #angularday
ANGULAR ELEMENTS

13. #angularday
LIBRARY GENERATION
1. ng generate library my-lib
2. publish on npm
3. share the library across multiple projects
4. usage: npm install my-lib

14. #angularday
IVY RENDER (A7)
• SMALLER (3KB!!!!)
• FASTER
• SIMPLER
• NO-BREAKING CHANGES
• NEXT-GEN TREE SHAKING

15. #angularday
LOCALITY
• NPM ships AoT code. No need to compile libs
• AoT and JiT code can be mixed
• No need factory files and metadata.json
• Fast. Only changes are recompiled
• Easy creation of components,
modules and directive at runtime

16. #angularday
SCHEMATICS e WORKSPACES
• ng add @angular/material
• ng add @angular/elements
• ng add @angular/pwa
• ng add @ng-bootstrap/schematics
• ng add @clr/angular
• ng add @nativescript/schematics
• ng add @your-namespace/custom

17. #angularday
TREE SHAKEABLE SERVICES
@Injectable({
providedIn: ‘root',
})
export class HeroService {}

18. #angularday
DESIGNSYSTEM
• ANGULAR MATERIAL
• CDK
• ANIMATIONS SUITE
• i18

19. VERSIONALIGNMENT

20. #angularday
TOOLS AND
ECOSYSTEM

21. ANGULARCLI
• ng new [PROJECT]
• ng generate components/modules/pipes/…
• ng generate library
• ng add: material, elements, PWA
• ng update: deps, code, RXJS, Material
• ng generate application: multiple-apps
#angularday

22. #angularday
REDUX
• ANGULAR REDUX
• NGRX (6)
• REACTIVE STATE MANAGEMENT
• STORE / REDUCER
• ACTIONS
• EFFECTS
• ROUTER
• SELECTORS
• ENTITIES
• RXJS 6 (NEW)
• NGRX-data (NEW)

23. #angularday
RXJS6

24. #angularday
ANGULARUNIVERSAL
• SERVER SIDE RENDERING
• SEO FRIENDLY
• FAST BOOTSTRAP

25. #angularday

26. #angularday
STACKBLITZ

27. #angularday
ng-now
import GitHub project on stackblitz in a click

28. #angularday
webpack-bundle-analyzer

29. #angularday
source-map-explorer

30. #angularday
LTS (LONGTERMSUPPORT)
• ANGULARJS (1.7): JUNE 2021
• ANGULAR (> 4+): 6 + 12 months

31. #angularday
BEST EDITORS / IDE
• Microsoft VISUAL STUDIO CODE (free)
• JetBrains WEBSTORM

32. #angularday
AND MUCH MORE
FEATURES, 3RD LIBRARIES, TOOLS...

33. #angularday
ANGULAR JAVASCRIPT REACT
OPPORTUNITÀ per DEVELOPER ITALIANI
(jobs / collaborations / training and more)
FACEBOOK GROUPS
developer italianideveloper italianideveloper italiani

34. #angularday
fabiobiondi.io