Front End Development Workflow Tools
-
Upload
ahmed-elmehri -
Category
Technology
-
view
234 -
download
0
Transcript of Front End Development Workflow Tools
![Page 1: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/1.jpg)
Front End Development Workflow Tools
@ahmehriAhmed Elmehri
![Page 2: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/2.jpg)
Front EndIS NOT
Back End
2
![Page 3: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/3.jpg)
JS ProjectIS NOT
Java Project
3
![Page 4: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/4.jpg)
Doesn’t fit
Not the right tool
4
![Page 5: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/5.jpg)
Development Workflow
Prepare project structure
Scaffolding
5
Build project Manage dependencies
Scaffolding tool Build toolTask runner Package Manager
![Page 6: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/6.jpg)
Development Workflow Tools
6
![Page 7: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/7.jpg)
Scaffoldinghttps://flic.kr/p/2Tjgck
![Page 8: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/8.jpg)
Yeoman the Scaffolding Tool
8
![Page 9: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/9.jpg)
Yeoman the Scaffolding Tool
9
![Page 10: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/10.jpg)
Yeoman the Scaffolding Tool
10
![Page 11: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/11.jpg)
YO the Command Line Interface
11
![Page 12: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/12.jpg)
Example
![Page 13: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/13.jpg)
Dependency Management
https://flic.kr/p/obcZW9
![Page 14: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/14.jpg)
npm the Package Manager
14
![Page 15: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/15.jpg)
npm the Package Manager
15
![Page 16: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/16.jpg)
npm the Package Manager
16
![Page 17: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/17.jpg)
npm the Package Manager
17
![Page 18: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/18.jpg)
Bower the Package Manager
18
![Page 19: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/19.jpg)
Bower the Package Manager
19
![Page 20: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/20.jpg)
Bower the Package Manager
20
![Page 21: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/21.jpg)
Example
![Page 22: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/22.jpg)
Building
https://flic.kr/p/bJT8og
![Page 23: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/23.jpg)
Grunt the Build Tool
23
![Page 24: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/24.jpg)
Grunt the Build Tool
24
![Page 25: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/25.jpg)
Grunt the Build Tool
25
![Page 26: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/26.jpg)
Example
![Page 27: Front End Development Workflow Tools](https://reader031.fdocuments.us/reader031/viewer/2022030303/587b5d091a28ab38258b4dbf/html5/thumbnails/27.jpg)
Thank You@ahmehriAhmed Elmehri
#front-end-dev-workflow-tools