This document summarizes Salvatore Laisa's talk at Codemotion Milan 2015 about his unexpected journey from Angular to React as a frontend developer. He discusses some of the challenges he initially faced with React's lack of routing, HTTP client, and templating compared to Angular. However, he learned to appreciate React's focus on components, minimal API, JSX syntax, and its approach to props, states and one-way data flow. He also discusses tools like Webpack, Babel and building his own stack with complementary libraries. Laisa's talk emphasizes focusing on patterns like mediator and web components rather than specific frameworks, and keeping an open mind about trends and progress in the field.

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

2. ABOUT ME
• Frontend Engineer @ Contactlab
• Fat cat owner
• Kung-fu newbie
• Doctor Who fan
• @moebiusmania
• www.salvatorelaisa.me

3. Mohole
2009
IBS
2007
4ward
2013
21-11
1982
ContactLab
2015

4. Copyright Warner Bros pictures
An unexpected journey for a frontend developer…

5. from Angular to React

6. from Backbone to Polymer

7. from Angular to Angular 2

8. from MVC to Components

9. 1. Background

10. 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

11. 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

12. WOW! I can take some new JS framework...
…into the project!

13. 2. What happened

16. Photo by: https://www.facebook.com/ClaudineStrummerPhotography/
WTF?

17. No routing
No $http equivalent
No external templating system
No (easy) 2 way data binding
I’m not feeling very well too

19. LOST IS THE NEW FOUND

20. 3. What I learned

21. THINKING IN COMPONENTS

22. THINKING IN COMPONENTS

23. MINIMAL API (& DOCUMENTATION
Vanilla JS FTW!

24. FROM HTML TO JSX
https://facebook.github.io/react/html-jsx.html
Unfortunately JSX isn’t always “plain” HTML

25. 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

26. WEBPACK
!
! !
exports {} exports {}
require()

27. ES6 + BABEL
+ Webpack || Gulp || whatever for “live compiling”

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

29. 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)

30. 4. Philosophy

32. Focus on mediator pattern and
web components
not on React or Polymer

33. FLUX
It was not created for you

34. For tight workflows between
developer (you) and UX/CSS designers
Polymer or React Templates are
strongly suggested.

35. Take control of your data-binding
Before your data-binding controls you!

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

37. Isomorphic Javascript is good
Framework agnostic Javascript is better

38. Following trends is important
Try out things give you knowledge

39. Be interested in progress
not on who make it

40. GRAZIE
Leave your feedback on Joind.in!
https://m.joind.in/event/codemotion-milan-2015