Front End development workflow

41
Javascript development workflow

Transcript of Front End development workflow

Page 1: Front End development workflow

Javascript

development workflow

Page 2: Front End development workflow

hello!

I am Matteo Scandolo

You can find me at @teone

Page 3: Front End development workflow

I am a

developer

Page 4: Front End development workflow

Frontend Architect

Page 5: Front End development workflow

What is CORD

Proprietary hardware

And software

Embedded

services

$ $ $

Commodity

hardware

Function

virtualization

Open Source

software

Page 6: Front End development workflow

I am not a

Network Engineer

For more information visit:

www.opencord.org

Page 7: Front End development workflow

< 2009 - ante Google Maps

Javascript as it was

Page 8: Front End development workflow

Was invented by Brendan Eich

in 1995

Page 9: Front End development workflow

Was written in

10

days

Page 10: Front End development workflow

“Sometimes is a bit immature...

var x = ['10', '10', '10'];

var y = x.map(parseInt)

console.log(y) ////[10, Nan, 2]

Page 11: Front End development workflow

“Sometimes is a bit immature...

console.log(NaN === NaN)

//false

Page 12: Front End development workflow

“Sometimes is a bit immature...

console.log(typeof [] === typeof {})

// true

Page 13: Front End development workflow

“But it is certainly funny!

console.log(Array(16).join('a' -1) + " Batman!")

Page 14: Front End development workflow

“Javascript as a presentation

enhancement.

Page 15: Front End development workflow

Javascript

Revolution

November 8th 2009

Page 16: Front End development workflow

“Ryan Dahl

presents

Page 17: Front End development workflow

“The web has evolved

Page 18: Front End development workflow
Page 19: Front End development workflow

Javascript libraries explosion

Page 20: Front End development workflow

Tooling

Comes to help!

Page 21: Front End development workflow

Package Managers

Page 22: Front End development workflow

Modules Bundler

System Js

Page 23: Front End development workflow

Pipeline

Page 24: Front End development workflow

Scaffolding

Page 25: Front End development workflow

Where they helps

In everyday life

Page 26: Front End development workflow

Transpilers

Babel

Typescript

Coffescript

dart

Page 27: Front End development workflow

Tests

Istanbul

Blanket

Dredd

BackstopJS

PhantomJs

Protractor

selenium

Karma

Jasmine

Mocha

Chai

Page 28: Front End development workflow

Syntax checkers

EsLint

JsLint

JsHint

Jscs

Page 29: Front End development workflow

Build

Development:

� Source mapping

(js, css)

� Live Reload

� Unit tests

� Environments

Testing (CI)

� Source mapping

(js, css)

� Mock data

� Coverage

� Dependencies

check (npm-check)

Production:

� Uglify

� Minification

� Asset handling

○ Gzip

○ Sprites

� Css Optimization

Page 30: Front End development workflow

What I’m using

Page 31: Front End development workflow

CORD Infrastructure

XOS

REST

APIs

External

Apps

Custom

Dashboards

$resource

creation

Component

library

Yeoman

generator

Blueprint

Api

definition

Dredd

(testing)

Page 32: Front End development workflow

Demo Time!

Page 33: Front End development workflow

“Yeoman + Gulp

� Complex project

� Different configurations

� Different environment

Custom Dashboards

Page 34: Front End development workflow

“NPM scripts

� Simple Projects

� Proof of concept

� Remove complexity

External Applications

Page 35: Front End development workflow

In my experience

AKA errors I made

Page 36: Front End development workflow

One step at a time

1

Page 37: Front End development workflow

Know your enemy

2

Page 38: Front End development workflow

It hurt

3

When the build brokes

(on friday night)

Page 39: Front End development workflow

There isn’t a solution

4

That works for all the problems

Page 40: Front End development workflow

Join the CORD community!

Partecipate in development and environment setup

Report bugs

Jira.opencord.org

slackin.opencord.org

Page 41: Front End development workflow

Thanks for listening

Questions??