Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

A Brief History of client-side JS: Why React is Awesome

No description
by

Mahmoud SaaDa

on 23 May 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of A Brief History of client-side JS: Why React is Awesome

2010
2020
2000
2015
A Brief History of client-side JS: Why React is Awesome
jQuery (2006)
Cross-browser
API
Powerful
DOM Manipulation
Painless
Ajax
Angular (2009)
Backbone (2010)
Ember (2011)
React (2013)
?
Any Questions?
2007
Components
Components, not templates
Business Logic and UI in the same context
Encourage High Cohesion & Loose Coupling
Abstraction, Composition, Expressivity
Reusable, Composable, Unit Testable
Components store data using State & Props
JSX views
State vs Props
State is only used in root components
Props are passed from parent to child components
Props are immutable
State is mutable
DOM
JS ($scope)
DOM Manipulation is
slow
Tight Coupling with HTML tags leads to scattered
spaghetti code
Extremely difficult to
track DOM event handlers
Pros
Cons
Direct DOM Manipulation
$( "button.click-me" ).html( "Next Step..." )
Indirect DOM Manipulation
var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
hiddenBox.show();
});
HTML
<div class="some-class" id="some-id">
<button class="click-me">
Click Me!
</button>
</div>
Coupling Hell
Documentation
Directives are
hard
Dirty Checking is
slow
Redefining well-established
terminology
Logic
all over the place

Pros
Cons
Two-way
Data Binding
Declarative
HTML
Backed by
Google
Bare
-bones features
Lots of
Boilerplate
Views suck
(jQuery style)
Pros
Cons
Auto-
synced models
via REST API
Compatible
well with other libraries
Robust
event system
Documentation
Too much magic behind the scenes make it
harder to learn
Lots of
context switching
Two-way data binding much more
complicated
Pros
Cons
True MVC pattern with Rails-like
magic
Handlebars' robust
templating
system
Backed by
Rails
community
Re-establishes
best practices
Change of
mindset
Pros
Cons
Minimal
(only UI layer)
Immutable
data across views
No data-binding
whatsoever
Compatible
with other libraries
Virtual DOM provides
fastest
view rendering (60fps) due to
idempotent
DOM manipulations
Documentation
Backed by
Facebook
Two-Way Data Binding
https://facebook.github.io/react/docs/tutorial.html
Full transcript