Tools for the modern Front-End Developer's workflow

Slide 1

Slide 1 text

Tools for the Modern Front-End Developer's Workﬂow @daviddiasfront #DevConMru

Slide 2

Slide 2 text

David Dias @daviddiasfront www.david-dias.com

Slide 3

Slide 3 text

Front-End Developer architect / manager http://www.proximity.bbdo.mu/

Slide 4

Slide 4 text

Years ago, Front-End developers were just like everyone imagine...

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No. In fact, it's was more...

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Debugging phase...

Slide 9

Slide 9 text

But what the Front-End really do?

Slide 10

Slide 10 text

-Wikipedia « The practice of producing HTML, CSS and JavaScript for a website or web application so that a user can see and interact with them directly. »

Slide 11

Slide 11 text

Before...

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

But today, Front-End development is much more than just HTML, CSS and JavaScript...

Slide 14

Slide 14 text

Today !

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Our tooling landscape is more and more complex.

Slide 17

Slide 17 text

Jeff Pelletier / On Medium

Slide 18

Slide 18 text

Texte du titre Don't be lost...

Slide 19

Slide 19 text

Choose the right tool for the right need. To save your time and do better your work.

Slide 20

Slide 20 text

Our projects are much more different and complexe.

Slide 21

Slide 21 text

Single Page Application HTML5 Games Mobile applications Web apps Responsive Web Design IoT

Slide 22

Slide 22 text

Front-End needs to care more than only the quality of their code.

Slide 23

Slide 23 text

Accessibility Performance SEO Quality Maintainability Browser compatibility Animations User Experience

Slide 24

Slide 24 text

Deﬁne a workﬂow is essential to face these new challenges.

Slide 25

Slide 25 text

A typical front-end workﬂow before...

Slide 26

Slide 26 text

- Choose your text editor. - Create your repository (versioning). - Create your HTML file, CSS file and JS file. - Create an "architecture". (copy-paste previous folders used on a previous project) - Put manually your code on FTP.

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

A typical front-end workﬂow today.

Slide 29

Slide 29 text

- Choose your text editor - Create your repository (versioning) - Choose the right framework, preprocessors, technologies... - Create your architecture and tasks - Put in place testing tools - Deploy automatically your application / website

Slide 30

Slide 30 text

Rule #1

Slide 31

Slide 31 text

Learn to the command-line

Slide 32

Slide 32 text

Don't be afraid!

Slide 33

Slide 33 text

How I feel when working with command line...

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

“Sandwich” (via xkcd) derives humor from the behavior of sudo CLI in real life... or not... *CLI = Command Line Interface

Slide 36

Slide 36 text

First, choose your Text Editor

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Source editing with Devtools Workspaces Add local source ﬁles to workspace Stage persisted changes https://developers.google.com/web/tools/setup/setup-workﬂow?hl=en

Slide 39

Slide 39 text

Version control management

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Why use GIT? And why everyone on earth is using GIT (almost everyone).

Slide 42

Slide 42 text

- Makes collaboration effortless - Fast (more than SVN) - Don't need internet to commit. - Flexible branching system (can develop features on parallel) - ...

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Choose the right framework, preprocessors, technologies...

Slide 48

Slide 48 text

UI Frameworks

Slide 49

Slide 49 text

Frameworks / library

Slide 50

Slide 50 text

Preprocessor

Slide 51

Slide 51 text

- Maintainability (DRY : Don't Repeat Yourself) - Variables - Modules - Conditional statements - Lot of features - Functions and much more

Slide 52

Slide 52 text

Templating

Slide 53

Slide 53 text

Why use a template engine? And why everyone on earth is using GIT (almost everyone).

Slide 54

Slide 54 text

- Rapid development and modiﬁcations - Code consistency - Standards compliance - ...

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Create your architecture and tasks

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

- JavaScript Runtime at command line - Allows us to write JS outside the browser - Built on V8 JS engine - Written in C++ - Developed by Google - Compiles JS code to native before execution

Slide 59

Slide 59 text

$ npm install -g yo $ yo angular

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Prepros

Slide 62

Slide 62 text

Process automation Task runner / bundler

Slide 63

Slide 63 text

« If you aren't using automation, you are working too hard. »

Slide 64

Slide 64 text

- Build fonts: convert icons in SVG to .ttf, .woff, .eot webfonts - Build images: optimize all layout's images (performance) - Dev reload: reload automatically the page after modiﬁcations - Dev js: concatenate and minify all JavaScript ﬁles - ...

Slide 65

Slide 65 text

$ npm install -g grunt-cli $ npm install grunt --save-dev

Slide 66

Slide 66 text

Grunt

Slide 67

Slide 67 text

$ npm install -g gulp $ npm install gulp --save-dev

Slide 68

Slide 68 text

Gulp

Slide 69

Slide 69 text

Jack Hsu - Grunt vs Gulp In Grunt, we must write intermediary ﬁles to disk In Gulp, we pipe the intermediary ﬁles in-memory to other streams

Slide 70

Slide 70 text

$ npm install -g browserify $ browserify main.js -o bundle.js

Slide 71

Slide 71 text

Process automation Package manager

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

$ npm install PACKAGE --save-dev $ npm install PACKAGE --save $ npm start (node app.js) $ npm test (karma start my.conf.js)

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

$ npm install -g bower $ bower install PLUGIN $ bower search PLUGIN

Slide 76

Slide 76 text

Testing tools

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

$ npm install karma --save-dev $ npm install karma-jasmine karma-chrome-launcher --save-dev $ karma init my.conf.js

Slide 79

Slide 79 text

Visual regression testing (Nightwatch.js, PhantomJS, CasperJS)

Slide 80

Slide 80 text

http://www.meetup.com/fr-FR/frontend-mauritius/ http://www.meetup.com/fr-FR/nodeschool-mauritius/ Soon... https://www.facebook.com/groups/frontenddevelopersmauritius/

Slide 81

Slide 81 text

That's All Folks. Questions?

Slide 82

Slide 82 text

Thank you. Merci. Obrigado. Feedbacks on Twitter with #DevConMru speakerdeck.com/daviddiasfront/tools-for-the-modern-front-end-developers-workﬂow