React.js

Some other  /^Use(full|less)?$/  bits.

Zak Burki

3rd March 2015

Agenda

  • Why React? Other Perspectives
  • To Flux or Not to Flux?
  • Learning React
  • React Native
  • What is the Future?

But First...

Anyone know who this is?

Wendy Davis - Filibusterer of the Year 2014

Did you know? Filibuster is derived from the Dutch term: vrijbuiter (freebooter or robber)  Robbing your time perhaps?

Why Use React?

Actual Real Life Comments:

"Zak, Start Learning React Now! I swear, I am enjoying coding again, It's that Good."

- Geek Friend, Berlin

"Because we are smart - and we know what we're doing!" - Facebook Employee, SF

"I've had enough of the tech we are currently using - surely this must be better?!"  - USV Backed Startup Founder, NY

BUT Remember..

It's not an MVC Framework.

 

It's only the V in MVC. The View.

The bad: You still need to build your Application! In essence - it is more work.

The good: You can use it with almost anything!

So...

It's not truly competing with

 

Ember / Angular / Express / Meteor / Rails / Django / Batman

Can be used with all of these and more.

If anything, it's competing more with jQuery and other libraries that are handling DOM manipulation (including rendering) and Event Handling.

To Flux...

Flux is a complementary archictecture for REACT Apps.

 

You Can Build Your Entire App with

REACT + FLUX + React-Router + Your Choice DB

 

But FLUX is not a framework - and is made up of several components. The most important component of Flux

-> DISPATCHER.

 

This is the Central Hub that controls/handles all the data and actions requested to it and returns stuff to your callbacks

...or not to Flux?

But Wait.

Facebook are developing something simpler to USE which will be a library.

RELAY

REACT + RELAY (+ GRAPHGL) + DB (of your choice)

WILL COMPETE

WITH OTHER MV(C)(VM) FRAMEWORKS

Where to Learn REACT?

The Internet.

But the Facebook React site is so messy:

 

http://facebook.github.io/react/docs/getting-started.html

NODE BACKROUND

 

Assuming you've used the MEN stack or similar:

 

http:/scotch.io/tutorials/

Small Demo Time!

Build a Twitter Stream with React.

Great Tutorial.

METEOR BACKGROUND

React + Meteor.js

 

Packages are available on Atmosphere to

allow you to use React Components with reactive data sources.

Demo Time!

But you  can use directly in your code!

RAILS BACKGROUND

https://hackhands.com/react-rails-tutorial/

 

Build The Comments Example from Fbook React Tutorial Step By Step.

One of the easiest Tutorials I have ever followed. I rarely write Ruby and got it working fine.

ANYthing Else?

What would be another good combo?

 

A Mongo Style DB that you can watch for changes automatically and push with web-sockets .

 

Enter RethinkDB (Mongo on Acid)

 

React + RethinkDB.

 

Get rid of the sockets.io code that we have to write ourselves in the MERN stack. Do a changefeed watch. Any changes on the DB will automatically get pushed to the view.

Is it easier to write your UI views in REACT?

oh. Hell No!

But. You're not learning to use React to make your life easier in the short term are you?

You're looking at the Longer Term Tangible Benefits.

  • More Maintainable and Arguably More Understandable Code
    • Forces you to think more on UI Code Structure and Design.
  • More re-usable code. Component UIs are clearly a good design pattern.
  • More robust code that doesn't easily break on new feature development.
  • Testing becomes simpler.
  • Easier to on-board new developers?
  • React Native?

Tell us more about these so-called long-term tangible benefits:

React Native

  • Uses the same declarative component style syntax and design.
  • But declare for UI Elements of Native Mobile Interfaces rather than HTML DOM elements.
  • It is not wrapping HTML/JS/CSS into Native Containers. (PhoneGap-Cordova)
  • Will use its own thread accessing the GPU for handling the UI changes and Animations.

React Native

Benefits:

  • Performance. Should be a super smooth experience.
  • Flexible (Use when Required) - Don't use when you don't want to. It's still a mix and match approach.
  • Same Style of Code Structure as React Components.
    • In theory, should be quick(er) to build UIs for Mobile if you've done it before for your Web Apps.

React Native

Drawbacks:

  • Will still require it's own codebase
  • You (or someone you know) will still need to understand iOS/Android UI Elements Views/Template Libraries
  • Good at CSS Styling? No One Cares.
  • Learn Once. Write Differently Everywhere.
  • Not as easy as PhoneGap.
  • Still Very Early Days. Take a look at Ionic -SuperSonic & Ionic Creator.

React Native

Also....

  • Not available publicly yet
  • Currently missing lots of iOS UI elements
  • Where's my pal - the Android?

Is it worth Learning?

  • What's your Product?
  • How large do you see your team getting?
  • How much do you Hate your current stack?
  • How much do you Love your current stack?
  • Do you or your team have time to learn it?
  • Are you trying to get a job at Facebook?

Best thing in my view:

Use React to build one small component in your Web Application. See if you like it.

Is React the Future of Web dev?

Maybe Yes:

  • Because the Facebook Smart Peops Say So?!
  • Performance Benefits of Virtual Dom diffing
  • Re-usable, robust UI code that teams can work with
  • Potentially no longer need to use Native Java/Swift or Hybrid Alternatives for great Mobile Experience

Maybe No:

  • Is it overkill for a lot of Applications?
  • Are the benefits really that vast?
  • If the benefits are so vast: Other Frameworks are likely to incorporate similar design patterns where they can to close the gap.

Conclusion

Perhaps the Functional - Declarative Design Pattern for Creating User Interfaces is the Future of Web Dev.

But Maybe Angular.js and other frameworks will gravitate to a similar UI code design pattern if it really makes sense for them to.

Early Days.

I wouldn't (fully) count on it.

The Geeks in the Valley (and worldwide) are sure to create new tech based on the same principles.

One Final Thought.

You like the sound of React? 

Why don't you also check out the other frameworks that use the virtual dom approach:

Mithril (http://lhorie.github.io/mithril/):

Client-Side MVC Framework. The lightest of lightweights. Performance Ratings Kicks Serious Ass.

Mercury (https://github.com/Raynos/mercury) : 

Similar to React - but very modular. Can swap out components you don't like for ones you do.

Any Questions?

Follow Me:

@zakburki

 

Meetup.com Group:

codelearn-hk

 

bitbucket:

zakir2k

Made with Slides.com