React + Flux - files.meetup.com - Why and why not.pdf · (and a little Meteor) BucharestJS Meetup...

13
React + Flux Why, when, why not? (and a little Meteor) BucharestJS Meetup June 24th, 2015

Transcript of React + Flux - files.meetup.com - Why and why not.pdf · (and a little Meteor) BucharestJS Meetup...

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Thank you