react + flux - files.meetup.com - why and why not.pdf · (and a little meteor) bucharestjs meetup...
TRANSCRIPT
![Page 1: React + Flux - files.meetup.com - Why and why not.pdf · (and a little Meteor) BucharestJS Meetup June 24th, 2015. Andrei Popovici ADYUS startup labs Product Manager & UX Designer](https://reader036.vdocuments.mx/reader036/viewer/2022071004/5fc1b197490afc437b14a876/html5/thumbnails/1.jpg)
React + FluxWhy, when, why not?(and a little Meteor)
BucharestJS MeetupJune 24th, 2015
![Page 2: React + Flux - files.meetup.com - Why and why not.pdf · (and a little Meteor) BucharestJS Meetup June 24th, 2015. Andrei Popovici ADYUS startup labs Product Manager & UX Designer](https://reader036.vdocuments.mx/reader036/viewer/2022071004/5fc1b197490afc437b14a876/html5/thumbnails/2.jpg)
Andrei Popovici
ADYUSstartup labs
Product Manager & UX Designer
![Page 3: React + Flux - files.meetup.com - Why and why not.pdf · (and a little Meteor) BucharestJS Meetup June 24th, 2015. Andrei Popovici ADYUS startup labs Product Manager & UX Designer](https://reader036.vdocuments.mx/reader036/viewer/2022071004/5fc1b197490afc437b14a876/html5/thumbnails/3.jpg)
What is React?
“A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES”
JUST THE UI VIRTUAL DOM DATA FLOW
Blaze-ingly fast Easy to test,Easy to reason
Promotes separation of concerns
![Page 6: React + Flux - files.meetup.com - Why and why not.pdf · (and a little Meteor) BucharestJS Meetup June 24th, 2015. Andrei Popovici ADYUS startup labs Product Manager & UX Designer](https://reader036.vdocuments.mx/reader036/viewer/2022071004/5fc1b197490afc437b14a876/html5/thumbnails/6.jpg)
What is Flux?
“APPLICATION ARCHITECTURE FOR BUILDING USER INTERFACES”
NO CODE INCLUDED UNIDIRECTIONAL FLOW
![Page 7: React + Flux - files.meetup.com - Why and why not.pdf · (and a little Meteor) BucharestJS Meetup June 24th, 2015. Andrei Popovici ADYUS startup labs Product Manager & UX Designer](https://reader036.vdocuments.mx/reader036/viewer/2022071004/5fc1b197490afc437b14a876/html5/thumbnails/7.jpg)
The concept
![Page 8: React + Flux - files.meetup.com - Why and why not.pdf · (and a little Meteor) BucharestJS Meetup June 24th, 2015. Andrei Popovici ADYUS startup labs Product Manager & UX Designer](https://reader036.vdocuments.mx/reader036/viewer/2022071004/5fc1b197490afc437b14a876/html5/thumbnails/8.jpg)
The … code?
![Page 9: React + Flux - files.meetup.com - Why and why not.pdf · (and a little Meteor) BucharestJS Meetup June 24th, 2015. Andrei Popovici ADYUS startup labs Product Manager & UX Designer](https://reader036.vdocuments.mx/reader036/viewer/2022071004/5fc1b197490afc437b14a876/html5/thumbnails/9.jpg)
Let’s build The Button!
inspired by /r/thebutton and @Rahul
• A countdown timer• You can only click once• Timer resets when clicked• Closest to 0 wins
Rules:
![Page 10: React + Flux - files.meetup.com - Why and why not.pdf · (and a little Meteor) BucharestJS Meetup June 24th, 2015. Andrei Popovici ADYUS startup labs Product Manager & UX Designer](https://reader036.vdocuments.mx/reader036/viewer/2022071004/5fc1b197490afc437b14a876/html5/thumbnails/10.jpg)
The blueprint
![Page 11: React + Flux - files.meetup.com - Why and why not.pdf · (and a little Meteor) BucharestJS Meetup June 24th, 2015. Andrei Popovici ADYUS startup labs Product Manager & UX Designer](https://reader036.vdocuments.mx/reader036/viewer/2022071004/5fc1b197490afc437b14a876/html5/thumbnails/11.jpg)
The breakdown
Header & login
Timer
Button
Leaderboard
TheButtonApp
![Page 12: React + Flux - files.meetup.com - Why and why not.pdf · (and a little Meteor) BucharestJS Meetup June 24th, 2015. Andrei Popovici ADYUS startup labs Product Manager & UX Designer](https://reader036.vdocuments.mx/reader036/viewer/2022071004/5fc1b197490afc437b14a876/html5/thumbnails/12.jpg)
Demo Time - The Button
http://bucharestjs.meteor.com
andreipopovici / bucharestjs (Meteor.js)andreipopovici / bucharestjs-react (Meteor + React)
![Page 13: React + Flux - files.meetup.com - Why and why not.pdf · (and a little Meteor) BucharestJS Meetup June 24th, 2015. Andrei Popovici ADYUS startup labs Product Manager & UX Designer](https://reader036.vdocuments.mx/reader036/viewer/2022071004/5fc1b197490afc437b14a876/html5/thumbnails/13.jpg)
Thank you