Angular Unplugged - Speaker Deck

Slide 1

Slide 1 text

twitter.com/mgechev github.com/mgechev blog.mgechev.com Angular Unplugged twitter.com/mgechev github.com/mgechev blog.mgechev.com

Slide 2

Slide 2 text

twitter.com/mgechev twitter.com/mgechev github.com/mgechev

Slide 3

Slide 3 text

twitter.com/mgechev

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

twitter.com/mgechev ANGULAR? WHAT IS

Slide 10

Slide 10 text

twitter.com/mgechev

Slide 11

Slide 11 text

twitter.com/mgechev AngularJS? Where is

Slide 12

Slide 12 text

twitter.com/mgechev

Slide 13

Slide 13 text

twitter.com/mgechev Angular 2, 4, …, n What about… n ϵ ℕ>4

Slide 14

Slide 14 text

twitter.com/mgechev Where is Angular 1? Where is Angular 3? Do I know Angular 4 if I know Angular 2? Three questions:

Slide 15

Slide 15 text

twitter.com/mgechev Where is Angular 1? Where is Angular 3? Do I know Angular 4 if I know Angular 2? Three questions:

Slide 16

Slide 16 text

twitter.com/mgechev Where is Angular 1? Where is Angular 3? Do I know Angular 4 if I know Angular 2? Three questions:

Slide 17

Slide 17 text

twitter.com/mgechev Angular It’s just

Slide 18

Slide 18 text

twitter.com/mgechev

Slide 19

Slide 19 text

twitter.com/mgechev X.Y.Z. Major Minor Patch Semantic versioning

Slide 20

Slide 20 text

twitter.com/mgechev Modules …that Angular comes with

Slide 21

Slide 21 text

twitter.com/mgechev core (di, abstractions, etc.)

Slide 22

Slide 22 text

twitter.com/mgechev core (di, abstractions, etc.) RENDERER

Slide 23

Slide 23 text

twitter.com/mgechev core (di, abstractions, etc.) RENDERER COMPILER

Slide 24

Slide 24 text

twitter.com/mgechev core (di, abstractions, etc.) RENDERER FORMS COMPILER

Slide 25

Slide 25 text

twitter.com/mgechev core (di, abstractions, etc.) HTTP RENDERER FORMS COMPILER

Slide 26

Slide 26 text

twitter.com/mgechev CLI core (di, abstractions, etc.) HTTP RENDERER FORMS COMPILER

Slide 27

Slide 27 text

twitter.com/mgechev I18N CLI core (di, abstractions, etc.) HTTP RENDERER FORMS COMPILER

Slide 28

Slide 28 text

twitter.com/mgechev ANIMATIONS I18N CLI core (di, abstractions, etc.) HTTP RENDERER FORMS COMPILER

Slide 29

Slide 29 text

twitter.com/mgechev ROUTER ANIMATIONS I18N CLI core (di, abstractions, etc.) HTTP RENDERER FORMS COMPILER

Slide 30

Slide 30 text

twitter.com/mgechev ROUTER ANIMATIONS I18N UNIVERSAL CLI core (di, abstractions, etc.) HTTP RENDERER FORMS COMPILER

Slide 31

Slide 31 text

twitter.com/mgechev ROUTER MATERIAL ANIMATIONS I18N UNIVERSAL CLI core (di, abstractions, etc.) HTTP RENDERER FORMS COMPILER

Slide 32

Slide 32 text

twitter.com/mgechev ROUTER MATERIAL ANIMATIONS I18N UNIVERSAL LANGUAGE SERVICE CLI core (di, abstractions, etc.) HTTP RENDERER FORMS COMPILER

Slide 33

Slide 33 text

twitter.com/mgechev ROUTER NGUPGRADE MATERIAL ANIMATIONS I18N UNIVERSAL LANGUAGE SERVICE CLI core (di, abstractions, etc.) HTTP RENDERER FORMS COMPILER

Slide 34

Slide 34 text

twitter.com/mgechev ROUTER NGUPGRADE MATERIAL ANIMATIONS I18N UNIVERSAL LANGUAGE SERVICE CLI core (di, abstractions, etc.) HTTP RENDERER FORMS COMPILER PWA

Slide 35

Slide 35 text

twitter.com/mgechev ROUTER NGUPGRADE MATERIAL ANIMATIONS I18N UNIVERSAL ANGULARFIRE LANGUAGE SERVICE CLI core (di, abstractions, etc.) HTTP RENDERER FORMS COMPILER PWA

Slide 36

Slide 36 text

twitter.com/mgechev is not? What Angular

Slide 37

Slide 37 text

twitter.com/mgechev complete architecture Angular doesn’t provide

Slide 38

Slide 38 text

twitter.com/mgechev MVVM MVC MVP Redux Flux

Slide 39

Slide 39 text

twitter.com/mgechev start? How to

Slide 40

Slide 40 text

twitter.com/mgechev

Slide 41

Slide 41 text

twitter.com/mgechev

Slide 42

Slide 42 text

twitter.com/mgechev • Angular’s AoT compiler • TypeScript compiler • Testing • Unit testing • e2e testing • Coverage • Module loader • Bundler • Provides bundling and tree shaking • Linter • TypeScript and CSS • Miniﬁer • Miniﬁcation & deadcode elimination • Service workers management/generation Tooling overhead

Slide 43

Slide 43 text

twitter.com/mgechev @angular/cli

Slide 44

Slide 44 text

twitter.com/mgechev Advanced scenarios @angular/cli ng eject github.com/mgechev/angular-seed

Slide 45

Slide 45 text

twitter.com/mgechev Text editors & IDEs VSCode WebStorm SublimeText VIM? (Language service)

Slide 46

Slide 46 text

twitter.com/mgechev

Slide 47

Slide 47 text

twitter.com/mgechev PWA

Slide 48

Slide 48 text

twitter.com/mgechev @angular/service-worker

Slide 49

Slide 49 text

twitter.com/mgechev

Slide 50

Slide 50 text

twitter.com/mgechev github.com/mgechev blog.mgechev.com Thank you! twitter.com/mgechev