SlideShare a Scribd company logo
1 of 78
Download to read offline
React: Rethinking Best Practices
Pete Hunt
@floydophone
Rethinking Best Practices
Give it five minutes.
http://37signals.com/svn/posts/3124-give-it-five-
minutes
Meet React.
A library for creating user
interfaces.
Meet React.
Renders your UI and responds to
events.
Meet React.
AKA: The V in MVC
Meet React.
Plays nicely with your stack,
whatever it may be.
Rethinking Best Practices
• Prerequisite
– Combine DOM generation and display logic
• React’s design
– Re-render the whole app on every update
• React’s implementation
– Virtual DOM and synthetic events
1. Build components, not
templates.
Rethinking Best Practices
We all like separation of
concerns, right?
Separation of concerns:
Reduce coupling, increase cohesion.
Coupling is:
“The degree to which each program
module relies on each of the other
modules.”
http://en.wikipedia.org/wiki/Coupling_(computer_science)
Cohesion is:
“The degree to which elements of a
module belong together.”
http://en.wikipedia.org/wiki/Cohesion_(computer_science)
Templates encourage a poor
separation of concerns.
So are Angular-style directives.
“View model” tightly couples
template to display logic.
[{“price”: “7.99”, “product”: “Back
scratcher”, “tableRowColor”:
“rgba(0, 0, 0, 0.5)”}]
Display logic and markup are
inevitably tightly coupled.
How do you find DOM nodes?
Display logic and markup are
highly cohesive.
They both show the UI.
Templates separate
technologies, not concerns.
And they do it by being deliberately
underpowered.
Symptoms that your front-end
technology is underpowered:
Reliance on primitive abstractions
(like {{> }} and {{#each }}).
Symptoms that your front-end
technology is underpowered:
Inventing lots of new concepts
(that already exist in JavaScript).
From the Angular directives docs:
“However isolated scope creates a new
problem: if a transcluded DOM is a child of
the widget isolated scope then it will not be
able to bind to anything. For this reason the
transcluded scope is a child of the original
scope, before the widget created an isolated
scope for its local variables. This makes the
transcluded and widget isolated scope
siblings.”
http://docs.angularjs.org/guide/directive
The framework cannot know how
to separate your concerns for you.
It should only provide powerful,
expressive tools for the user to do it
correctly.
This tool is a React component.
A highly cohesive building block for
UIs loosely coupled with other
components.
Use components to separate
your concerns.
With the full power of
JavaScript, not a crippled
templating language.
Abstraction
Composition
Expressivity
Components are reusable.
Components are composable.
Components are unit testable.
They are, after all, units.
What about spaghetti code?
Just don’t write spaghetti code.
Keep your components small.
Just don’t write spaghetti code.
Only put display logic in your
components.
Just don’t write spaghetti code.
“With great power comes great
responsibility” – Uncle Ben in
Spiderman
What about XSS?
React.DOM.a(
{href: „http://instagram.com/floydophone‟},
„@floydophone on Instagram‟
);
What about working with
designers?
JSX is an optional preprocessor
to let you use HTML-like syntax.
<a href=“http://instagram.com/floydophone”>
@floydophone on Instagram
</a>
JSX is an optional preprocessor
to let you use HTML-like syntax.
React.DOM.a(
{href: „http://instagram.com/floydophone‟},
„@floydophone on Instagram‟
)
With JSX, it’s easy for designers
to contribute code.
The accessibility of templates
and the power of JavaScript.
2. Re-render the whole app on
every update
The key design decision that makes
React awesome.
Building UIs is hard because
there is so much state.
Lots of UI elements · Design
iteration · Crazy environments ·
Mutable DOM · User input · etc etc
Data changing over time is the
root of all evil.
“Our intellectual powers are rather geared to
master static relations and our powers to visualize
processes evolving in time are relatively poorly
developed. For that reason we should do (as wise
programmers aware of our limitations) our utmost
to shorten the conceptual gap between the static
program and the dynamic process, to make the
correspondence between the program (spread
out in text space) and the process (spread out in
time) as trivial as possible” – Dijkstra
In the 90s it was easier.
Just refresh the page when the data
changes.
When the data changes, React re-
renders the entire component.
That is, React components are
basically just idempotent functions.
They describe your UI at any point in
time, just like a server-rendered
app.
Rethinking Best Practices
Re-rendering on every change
makes things simple.
Every place data is displayed is
guaranteed to be up-to-date.
Re-rendering on every change
makes things simple.
No magical data binding.
Re-rendering on every change
makes things simple.
No model dirty checking.
Re-rendering on every change
makes things simple.
No more explicit DOM operations –
everything is declarative.
“Re-render on every change?
That seems expensive.”
“And doesn’t it mess up form fields
and scroll position?”
3. Virtual DOM
Makes re-rendering on every
change fast.
You can’t just throw out the DOM
and rebuild it on each update.
It’s too slow and you’ll lose form
state and scroll position.
So we built a virtual DOM (and
events system).
Optimized for performance and
memory footprint
On every update…
• React builds a new virtual DOM subtree
• …diffs it with the old one
• …computes the minimal set of DOM
mutations and puts them in a queue
• …and batch executes all updates
React’s architecture looks a lot
like the Doom 3 engine
http://fabiensanglard.net/doom3/renderer.php
Game state /
input
Game logic Scene IR
Render
OpenGL ops
GFX card
http://fabiensanglard.net/doom3/renderer.php
App state /
events
React
components
Virtual
DOM
Compute DOM
operations
Browser
http://fabiensanglard.net/doom3/renderer.php
It’s fast!
Because the DOM is slow!
It’s fast!
Computes minimal DOM operations
It’s fast!
Batched reads and writes for
optimal DOM performance
It’s fast!
Usually faster than manual DOM
operations
It’s fast!
Automatic top-level event
delegation (with cross-browser
HTML5 events)
It’s fast!
Provides hooks for custom update
logic (though they’re almost never
used)
It’s fast!
Can do all this at 60fps, even in a
(non-JIT) UIWebView on the
iPhone.
The virtual DOM lets us do fun
things.
It can run in Node.js (new in 0.4)
The virtual DOM lets us do fun
things.
Optimizations based on app
structure
The virtual DOM lets us do fun
things.
Testability for free
The virtual DOM lets us do fun
things.
SVG, VML and <canvas> support
The virtual DOM lets us do fun
things.
Running the whole app in a Web
Worker (experimental)
Key takeaways
Components, not templates.
Re-render, don’t mutate.
Virtual DOM is simple and fast
Thanks for Rethinking Best
Practices with me!
http://reactjs.org/
#reactjs on Freenode IRC
reactjs on Google Groups

More Related Content

What's hot (20)

Best Practice-React
Best Practice-ReactBest Practice-React
Best Practice-React
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
 
React hooks
React hooksReact hooks
React hooks
 
React new features and intro to Hooks
React new features and intro to HooksReact new features and intro to Hooks
React new features and intro to Hooks
 
React js
React jsReact js
React js
 
Basics of React Hooks.pptx.pdf
Basics of React Hooks.pptx.pdfBasics of React Hooks.pptx.pdf
Basics of React Hooks.pptx.pdf
 
Its time to React.js
Its time to React.jsIts time to React.js
Its time to React.js
 
Getting Started with NgRx (Redux) Angular
Getting Started with NgRx (Redux) AngularGetting Started with NgRx (Redux) Angular
Getting Started with NgRx (Redux) Angular
 
React Hooks
React HooksReact Hooks
React Hooks
 
WEB DEVELOPMENT USING REACT JS
 WEB DEVELOPMENT USING REACT JS WEB DEVELOPMENT USING REACT JS
WEB DEVELOPMENT USING REACT JS
 
React JS - Introduction
React JS - IntroductionReact JS - Introduction
React JS - Introduction
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
 
React Context API
React Context APIReact Context API
React Context API
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
 
Learn react-js
Learn react-jsLearn react-js
Learn react-js
 
Ngrx slides
Ngrx slidesNgrx slides
Ngrx slides
 
React js
React jsReact js
React js
 
Introduction to React JS for beginners
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners
 

Similar to Rethinking Best Practices

Welcome to React & Flux !
Welcome to React & Flux !Welcome to React & Flux !
Welcome to React & Flux !Ritesh Kumar
 
Introduction to Functional Reactive Web with Clojurescript
Introduction to Functional Reactive Web with ClojurescriptIntroduction to Functional Reactive Web with Clojurescript
Introduction to Functional Reactive Web with ClojurescriptJohn Stevenson
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)Chiew Carol
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]GDSC UofT Mississauga
 
Daniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého SchizmaDaniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého SchizmaDevelcz
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiJared Faris
 
Javascript spaghetti stirtrek_5_17
Javascript  spaghetti stirtrek_5_17Javascript  spaghetti stirtrek_5_17
Javascript spaghetti stirtrek_5_17Jared Faris
 
React gsg presentation with ryan jung &amp; elias malik
React   gsg presentation with ryan jung &amp; elias malikReact   gsg presentation with ryan jung &amp; elias malik
React gsg presentation with ryan jung &amp; elias malikLama K Banna
 
Getting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular DeveloperGetting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular DeveloperFabrit Global
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistMark Fayngersh
 
Building a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one weekBuilding a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one weekDr. Felix Raab
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptAndrew Lovett-Barron
 
Pain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr SugakPain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr SugakSigma Software
 
Powerful tools for building web solutions
Powerful tools for building web solutionsPowerful tools for building web solutions
Powerful tools for building web solutionsAndrea Tino
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIMarcin Grzywaczewski
 
Better web apps with React and Redux
Better web apps with React and ReduxBetter web apps with React and Redux
Better web apps with React and ReduxAli Sa'o
 
O365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - MaterialO365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - MaterialThomas Daly
 
Js foo - Sept 8 upload
Js foo - Sept 8 uploadJs foo - Sept 8 upload
Js foo - Sept 8 uploadDebnath Sinha
 

Similar to Rethinking Best Practices (20)

Welcome to React & Flux !
Welcome to React & Flux !Welcome to React & Flux !
Welcome to React & Flux !
 
Introduction to Functional Reactive Web with Clojurescript
Introduction to Functional Reactive Web with ClojurescriptIntroduction to Functional Reactive Web with Clojurescript
Introduction to Functional Reactive Web with Clojurescript
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
Daniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého SchizmaDaniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého Schizma
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript Spaghetti
 
Javascript spaghetti stirtrek_5_17
Javascript  spaghetti stirtrek_5_17Javascript  spaghetti stirtrek_5_17
Javascript spaghetti stirtrek_5_17
 
React gsg presentation with ryan jung &amp; elias malik
React   gsg presentation with ryan jung &amp; elias malikReact   gsg presentation with ryan jung &amp; elias malik
React gsg presentation with ryan jung &amp; elias malik
 
Getting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular DeveloperGetting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular Developer
 
Android crash course
Android crash courseAndroid crash course
Android crash course
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
 
Building a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one weekBuilding a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one week
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate Javascript
 
Pain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr SugakPain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr Sugak
 
Powerful tools for building web solutions
Powerful tools for building web solutionsPowerful tools for building web solutions
Powerful tools for building web solutions
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
 
Better web apps with React and Redux
Better web apps with React and ReduxBetter web apps with React and Redux
Better web apps with React and Redux
 
O365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - MaterialO365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - Material
 
Js foo - Sept 8 upload
Js foo - Sept 8 uploadJs foo - Sept 8 upload
Js foo - Sept 8 upload
 

Recently uploaded

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 

Recently uploaded (20)

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 

Rethinking Best Practices

Editor's Notes

  1. No fb
  2. SarcasticNot a tutorial
  3. Or: mixing markup and display logic
  4. Or: mixing markup and display logic
  5. PARTIALS
  6. Jab ember?
  7. Dismiss syntax
  8. “You want me to generate my markup in JavaScript!?”
  9. ----- Meeting Notes (8/22/13 16:30) -----which places in the page do i have to update my like count
  10. ----- Meeting Notes (8/22/13 16:30) -----easy to unit test
  11. ----- Meeting Notes (9/9/13 12:00) -----nowhere in this example is the dom node for count explicitly updated
  12. Two-way data binding talk