Salvatore Laisa - Da Angular a React - Un viaggio inaspettato

40
Da Angular a React: un viaggio inaspettato Salvatore Laisa Codemotion Milan 21.11.2015

Transcript of Salvatore Laisa - Da Angular a React - Un viaggio inaspettato

Da Angular a React: un viaggio inaspettato

Salvatore Laisa

Codemotion Milan 21.11.2015

ABOUT ME

• Frontend Engineer @ Contactlab

• Fat cat owner

• Kung-fu newbie

• Doctor Who fan

• @moebiusmania

• www.salvatorelaisa.me

Mohole

2009

IBS

2007

4ward

201321-11 1982

ContactLab

2015

Copyright Warner Bros pictures

An unexpected journey for a frontend developer…

from Angular to React

from Backbone to Polymer

from Angular to Angular 2

from MVC to Components

1. Background

MYSELF

• Experience in web fronted development

• Passionate about tech and web development

• User groups co-organizer and attendee (Appsterdam Milan,

MilanoJS, M&M Mean Milan)

• Angular JS 1.x heavy users since 2012

• Up to date in the JS world

CONTACTLAB

• since 1998

• New products R&D team

• Request to the team:

• Prototype and build a suite of products

• Shared look and feel, UI patterns and logic

• Build everything from scratch

WOW! I can take some new JS framework...

…into the project!

2. What happened

Photo by: https://www.facebook.com/ClaudineStrummerPhotography/

WTF?

No routing

No $http equivalent

No external templating system

No (easy) 2 way data binding

I’m not feeling very well too

LOST IS THE NEW FOUND

3. What I learned

THINKING IN COMPONENTS

THINKING IN COMPONENTS

MINIMAL API (& DOCUMENTATION

Vanilla JS FTW!

FROM HTML TO JSX

https://facebook.github.io/react/html-jsx.html

Unfortunately JSX isn’t always “plain” HTML

PROPS & STATES & ONE WAY DATA FLOWS

• Data flows down

• Props are immutable

• States are mutable ( use .setState()! )

• Props & States can be passed to child

components as Props

WEBPACK

!

! !exports {} exports {}

require()

ES6 + BABEL

+ Webpack || Gulp || whatever for “live compiling”

REACT TEMPLATES

http://wix.github.io/react-templates/ (it comes with integrations for Webpack, Gulp and more)

BUILD YOUR OWN STACK

https://github.com/facebook/react/wiki/Complementary-Tools

• Fetch API polyfill • Flatiron Director • React Router • Lodash • …

… but now we have a full “official React” stack (React + Flux + Relay + GraphQL)

4. Philosophy

Focus on mediator pattern and web components

not on React or Polymer

FLUX

It was not created for you

For tight workflows between developer (you) and UX/CSS designers

Polymer or React Templates are strongly suggested.

Take control of your data-binding

Before your data-binding controls you!

Whatever framework or library you love today will be obsolete in 3 to 5 years

Isomorphic Javascript is good

Framework agnostic Javascript is better

Following trends is important

Try out things give you knowledge

Be interested in progress

not on who make it

GRAZIE Leave your feedback on Joind.in!

https://m.joind.in/event/codemotion-milan-2015