Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front End Development Workflow Tools

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Ahmed Elmehri Ahmed Elmehri
September 04, 2015
Technology
0
79

Front End Development Workflow Tools

A talk about the modern tools used today in front-end development.

Avatar for Ahmed Elmehri

Ahmed Elmehri

September 04, 2015
Tweet

More Decks by Ahmed Elmehri

See All by Ahmed Elmehri
Node.js
Avatar for Ahmed Elmehri ahmehri
0
56
IntelliJ IDEA
Avatar for Ahmed Elmehri ahmehri
0
86
Initiation to AngularJS
Avatar for Ahmed Elmehri ahmehri
0
45
AngularJS testing
Avatar for Ahmed Elmehri ahmehri
0
83

Other Decks in Technology

See All in Technology
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
Avatar for Kazuki Miura miu_crescent
PRO
2
180
ZOZOにおけるAI活用の現在 ~開発組織全体での取り組みと試行錯誤~
Avatar for ZOZO Developers zozotech
PRO
5
5.1k
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
Avatar for coconala_engineer coconala_engineer
2
630
プロダクト成長を支える開発基盤とスケールに伴う課題
Avatar for yuu26 yuu26
4
1.3k
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
Avatar for khmoryz khmoryz
0
180
Greatest Disaster Hits in Web Performance
Avatar for Estela Franco guaca
0
210
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
Avatar for shibayu36 shibayu36
0
210
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
6.8k
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
Avatar for oracle4engineer oracle4engineer
PRO
1
130
こんなところでも（地味に）活躍するImage Modeさんを知ってるかい？- Image Mode for OpenShift -
Avatar for Masataka Tsukamoto tsukaman
0
130
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
300
GitLab Duo Agent Platform × AGENTS.md で実現するSpec-Driven Development / GitLab Duo Agent Platform × AGENTS.md
Avatar for Niishi Kubo n11sh1
0
130

Featured

See All Featured
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
230
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
130
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
300
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
51
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.2k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
110
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k

Transcript

  1. Front End Development Workflow Tools @ahmehri Ahmed Elmehri

  2. Front End IS NOT Back End 2

  3. JS Project IS NOT Java Project 3

  4. Doesn’t fit Not the right tool 4

  5. Development Workflow Prepare project structure Scaffolding 5 Build project Manage

    dependencies Scaffolding tool Build tool Task runner Package Manager

  6. Development Workflow Tools 6

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

  8. Yeoman the Scaffolding Tool 8

  9. Yeoman the Scaffolding Tool 9

  10. Yeoman the Scaffolding Tool 10

  11. YO the Command Line Interface 11

  12. Example

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

  14. npm the Package Manager 14

  15. npm the Package Manager 15

  16. npm the Package Manager 16

  17. npm the Package Manager 17

  18. Bower the Package Manager 18

  19. Bower the Package Manager 19

  20. Bower the Package Manager 20

  21. Example

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

  23. Grunt the Build Tool 23

  24. Grunt the Build Tool 24

  25. Grunt the Build Tool 25

  26. Example

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