Front End development workflow

Post on 20-Feb-2017

374 views 1 download

transcript

Javascript

development workflow

hello!

I am Matteo Scandolo

You can find me at @teone

I am a

developer

Frontend Architect

What is CORD

Proprietary hardware

And software

Embedded

services

$ $ $

Commodity

hardware

Function

virtualization

Open Source

software

I am not a

Network Engineer

For more information visit:

www.opencord.org

< 2009 - ante Google Maps

Javascript as it was

Was invented by Brendan Eich

in 1995

Was written in

10

days

“Sometimes is a bit immature...

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

var y = x.map(parseInt)

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

“Sometimes is a bit immature...

console.log(NaN === NaN)

//false

“Sometimes is a bit immature...

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

// true

“But it is certainly funny!

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

“Javascript as a presentation

enhancement.

Javascript

Revolution

November 8th 2009

“Ryan Dahl

presents

“The web has evolved

Javascript libraries explosion

Tooling

Comes to help!

Package Managers

Modules Bundler

System Js

Pipeline

Scaffolding

Where they helps

In everyday life

Transpilers

Babel

Typescript

Coffescript

dart

Tests

Istanbul

Blanket

Dredd

BackstopJS

PhantomJs

Protractor

selenium

Karma

Jasmine

Mocha

Chai

Syntax checkers

EsLint

JsLint

JsHint

Jscs

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

What I’m using

CORD Infrastructure

XOS

REST

APIs

External

Apps

Custom

Dashboards

$resource

creation

Component

library

Yeoman

generator

Blueprint

Api

definition

Dredd

(testing)

Demo Time!

“Yeoman + Gulp

� Complex project

� Different configurations

� Different environment

Custom Dashboards

“NPM scripts

� Simple Projects

� Proof of concept

� Remove complexity

External Applications

In my experience

AKA errors I made

One step at a time

1

Know your enemy

2

It hurt

3

When the build brokes

(on friday night)

There isn’t a solution

4

That works for all the problems

Join the CORD community!

Partecipate in development and environment setup

Report bugs

Jira.opencord.org

slackin.opencord.org

Thanks for listening

Questions??