Tweet
Tweet

Slide 1

Slide 1 text

Front End Development Workflow Tools @ahmehri Ahmed Elmehri

Slide 2

Slide 2 text

Front End IS NOT Back End 2

Slide 3

Slide 3 text

JS Project IS NOT Java Project 3

Slide 4

Slide 4 text

Doesn’t fit Not the right tool 4

Slide 5

Slide 5 text

Development Workflow Prepare project structure Scaffolding 5 Build project Manage dependencies Scaffolding tool Build tool Task runner Package Manager

Slide 6

Slide 6 text

Development Workflow Tools 6

Slide 7

Slide 7 text

Scaffolding https://flic.kr/p/2Tjgck

Slide 8

Slide 8 text

Yeoman the Scaffolding Tool 8

Slide 9

Slide 9 text

Yeoman the Scaffolding Tool 9

Slide 10

Slide 10 text

Yeoman the Scaffolding Tool 10

Slide 11

Slide 11 text

YO the Command Line Interface 11

Slide 12

Slide 12 text

Example

Slide 13

Slide 13 text

Dependency Management https://flic.kr/p/obcZW9

Slide 14

Slide 14 text

npm the Package Manager 14

Slide 15

Slide 15 text

npm the Package Manager 15

Slide 16

Slide 16 text

npm the Package Manager 16

Slide 17

Slide 17 text

npm the Package Manager 17

Slide 18

Slide 18 text

Bower the Package Manager 18

Slide 19

Slide 19 text

Bower the Package Manager 19

Slide 20

Slide 20 text

Bower the Package Manager 20

Slide 21

Slide 21 text

Example

Slide 22

Slide 22 text

Building https://flic.kr/p/bJT8og

Slide 23

Slide 23 text

Grunt the Build Tool 23

Slide 24

Slide 24 text

Grunt the Build Tool 24

Slide 25

Slide 25 text

Grunt the Build Tool 25

Slide 26

Slide 26 text

Example

Slide 27

Slide 27 text

Thank You @ahmehri Ahmed Elmehri #front-end-dev-workflow-tools