SlideShare ist ein Scribd-Unternehmen logo
1 von 52
Downloaden Sie, um offline zu lesen
HI!
ABOUT ME
Ryan work HackerYou
Instructor and Developer at HackerYou
@Rchristiani on Twitter
ryanchristiani.com
letslearnes6.com
Ryan Christiani I Heard React Was Good
I HEARD REACT
WAS GOOD
Ryan Christiani I Heard React Was Good
REACT AT HACKERYOU
Internal Applications
Alumni
CONSIDERATIONS
How would a new developer experience a new tool.
React is the new AngularJS in terms of job posting, what
does that mean for us?
WHY DO WE HAVE REACT?
We have a lot of libraries and frameworks...
Ember
Angular
Backbone
Vue.js
Mithril
Tesla...
I thought I made that one up,
I googled it, it is a thing...
JUST A VIEW LAYER
The one key feature of the React library, is that it is really
just a view layer. It is just simple components.
let App = React.createClass({
render() {
return (
<main>
<h1>What an APP!</h1>
</main>
);
}
});
The problem it really solves is application state.
Since React is just a view layer, it is more of tool in your
application structure, rather than the entire application
structure itself. You have freedom to build as you need.
Ryan Christiani I Heard React Was Good
COMPONENTS REIGN SUPREME
Components allow you to look at your app in a modular,
DRY and reusable manner. Large templates can be broken
down into simple, reusable components.
NOT JUST REACT
React is not the only library focusing on components,
libraries like Polymer and frameworks like Ember have
similar structures.
Polymer is all about components, the styles and events are
all wrapper up into one file. One component.
LIFECYCLES
Each component has a lifecycle. This lifecycle allows you to
really take control of your components. These will run at
certain points through the execution of the component.
COMPONENTDIDMOUNT()
This is a hook that will run when the component is rendered,
and it will run only once. But here is where we can decide
whether or not to load data.
COMPONENTWILLUNMOUNT()
A hook run before the component is unmounted, or
removed. A place to clean up if needed.
This reminded me of Backbone, when you had to manually
clean up after yourself.
COMPONENTS MAKE TESTING EASY.
Because everything is broken up into modular parts, this
allows you to isolate your components to test them.
In general components are pretty loosely coupled, they are
fairly self contained. Typically they are coupled most with
the data coming into them in the form of props.
JSX
HTML in your JavaScript?! Yes.
Seems weird at first
Create a more intuitive templates
Attach your events on the DOM....
EVENTS IN YOUR TEMPLATES
Seems counter intuitive, after all didn't we all learn to
decouple events from the DOM?
Declarative events on the DOM, since everything can exist in
one file, it is easy to track down your events.
let User = React.createClass({
delete() {
//Delete the user
},
render() {
return (
<div>
...
<button onclick="{this.delete}">Delete User</button>
</div>
)
}
});
We were also told that events on our DOM elements was
bad. It tied our logic and JS to closely to the HTML, the
structure of our page.
The structure is becoming increasing more dynamic.
Keeping our events tied to this structure now makes more
sense.
LACK OF FEATURES
React provides us with great building blocks, but it does not
provide all the pieces. This is on purpose.
...I think that can be a good thing, more on that later
NO CLEAR PATH.
However that can be confusing. When you start working
with Angular, or Ember. There is a real
`${library.name}-way`of doing things.
little ES6 joke there...
HOW DO YOU START A PROJECT?
Since React is just one layer of your app, how do you get
started?
WEBPACK?
GULP + BROWSERIFY?
NPM SCRIPTS?
BABELIFY?!
GRUNT? JUST GOT A V1 RELEASE!
THE EMBER WAY
If you have ever worked with Ember, you know there is a
very Ember way to do things.
Ember has the ember-cli as a great tool to get going with!
DATA
One of the first things you will want when working with
React is getting data.
WHERE DOES IT COME FROM?
Most frameworks have a preferred method of getting data.
Ember has Ember Data.
Angular has $http
Backbone has Backbone.Model
React has what? $.ajax, fetch, roll your own?
IT'S UP TO YOU!
APPLICATION FLOW.
How do we handle data at an application level?
FLUX
Facebook's proposed application architecture.
...but not an actual implementation
Ryan Christiani I Heard React Was Good
REDUX
The most popular
RELAY
GRAPHQL
GOOD PARTS
SPEED
React is FAST!
And this has pushed frameworks like Ember even further!
Ember implemented its Glimmer engine based off of ideas
from React.
FORCES EXPLORATION
Because there are missing pieces, it forces you or your team
to explore other possibilities.
What practices work best for you, each project will have a
different set of requirements.
CREATES BETTER JS DEVS
It is helping to create better JS devs, not better
`${framework} devs`.
Too often I see people getting stuck as a framework specific
developer, and not expanding on their core skills.
Ryan Christiani I Heard React Was Good
INTRO TO ES6
FUNCTIONAL PROGRAMMING
IMMUTABILITY
PEOPLE GET AFRAID OF POSSIBILITIES.
IT IS IMPORTANT TO REMEMBER.
Ryan Christiani I Heard React Was Good
Ryan Christiani I Heard React Was Good
You don't need it all.
THANKS
@Rchristiani

Weitere ähnliche Inhalte

Was ist angesagt?

Getting Started with React-Nathan Smith
Getting Started with React-Nathan SmithGetting Started with React-Nathan Smith
Getting Started with React-Nathan SmithTandemSeven
 
Developing, building, testing and deploying react native apps
Developing, building, testing and deploying react native appsDeveloping, building, testing and deploying react native apps
Developing, building, testing and deploying react native appsLeena N
 
Intro To React Native
Intro To React NativeIntro To React Native
Intro To React NativeFITC
 
Best Practice-React
Best Practice-ReactBest Practice-React
Best Practice-ReactYang Yang
 
Introduction to React Native & Rendering Charts / Graphs
Introduction to React Native & Rendering Charts / GraphsIntroduction to React Native & Rendering Charts / Graphs
Introduction to React Native & Rendering Charts / GraphsRahat Khanna a.k.a mAppMechanic
 
E2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer
E2E testing Single Page Apps and APIs with Cucumber.js and PuppeteerE2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer
E2E testing Single Page Apps and APIs with Cucumber.js and PuppeteerPaul Jensen
 
Enemy of the state
Enemy of the stateEnemy of the state
Enemy of the stateMike North
 
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...Paul Jensen
 
JOSA TechTalks - RESTful API Concepts and Best Practices
JOSA TechTalks - RESTful API Concepts and Best PracticesJOSA TechTalks - RESTful API Concepts and Best Practices
JOSA TechTalks - RESTful API Concepts and Best PracticesJordan Open Source Association
 
Creating books app with react native
Creating books app with react nativeCreating books app with react native
Creating books app with react nativeAli Sa'o
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React NativePolidea
 
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBoxKobkrit Viriyayudhakorn
 
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animationOptimizing React Native views for pre-animation
Optimizing React Native views for pre-animationModusJesus
 
From zero to hero with React Native!
From zero to hero with React Native!From zero to hero with React Native!
From zero to hero with React Native!Commit University
 
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptReact Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptKobkrit Viriyayudhakorn
 
What's This React Native Thing I Keep Hearing About?
What's This React Native Thing I Keep Hearing About?What's This React Native Thing I Keep Hearing About?
What's This React Native Thing I Keep Hearing About?Evan Stone
 
Using JHipster 4 for generating Angular/Spring Boot apps
Using JHipster 4 for generating Angular/Spring Boot appsUsing JHipster 4 for generating Angular/Spring Boot apps
Using JHipster 4 for generating Angular/Spring Boot appsYakov Fain
 

Was ist angesagt? (20)

Getting Started with React-Nathan Smith
Getting Started with React-Nathan SmithGetting Started with React-Nathan Smith
Getting Started with React-Nathan Smith
 
Developing, building, testing and deploying react native apps
Developing, building, testing and deploying react native appsDeveloping, building, testing and deploying react native apps
Developing, building, testing and deploying react native apps
 
Intro To React Native
Intro To React NativeIntro To React Native
Intro To React Native
 
Best Practice-React
Best Practice-ReactBest Practice-React
Best Practice-React
 
Introduction to React Native & Rendering Charts / Graphs
Introduction to React Native & Rendering Charts / GraphsIntroduction to React Native & Rendering Charts / Graphs
Introduction to React Native & Rendering Charts / Graphs
 
E2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer
E2E testing Single Page Apps and APIs with Cucumber.js and PuppeteerE2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer
E2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer
 
Enemy of the state
Enemy of the stateEnemy of the state
Enemy of the state
 
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
 
JOSA TechTalks - RESTful API Concepts and Best Practices
JOSA TechTalks - RESTful API Concepts and Best PracticesJOSA TechTalks - RESTful API Concepts and Best Practices
JOSA TechTalks - RESTful API Concepts and Best Practices
 
Creating books app with react native
Creating books app with react nativeCreating books app with react native
Creating books app with react native
 
React JS
React JSReact JS
React JS
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
 
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animationOptimizing React Native views for pre-animation
Optimizing React Native views for pre-animation
 
From zero to hero with React Native!
From zero to hero with React Native!From zero to hero with React Native!
From zero to hero with React Native!
 
React introduction
React introductionReact introduction
React introduction
 
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptReact Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
 
What's This React Native Thing I Keep Hearing About?
What's This React Native Thing I Keep Hearing About?What's This React Native Thing I Keep Hearing About?
What's This React Native Thing I Keep Hearing About?
 
React Native Firebase
React Native FirebaseReact Native Firebase
React Native Firebase
 
Using JHipster 4 for generating Angular/Spring Boot apps
Using JHipster 4 for generating Angular/Spring Boot appsUsing JHipster 4 for generating Angular/Spring Boot apps
Using JHipster 4 for generating Angular/Spring Boot apps
 

Andere mochten auch

Front-end Tools: Sifting Through the Madness
 Front-end Tools: Sifting Through the Madness Front-end Tools: Sifting Through the Madness
Front-end Tools: Sifting Through the MadnessFITC
 
Kickstarting Your Stupid Magazine
Kickstarting Your Stupid MagazineKickstarting Your Stupid Magazine
Kickstarting Your Stupid MagazineFITC
 
Improving Game Performance in the Browser
Improving Game Performance in the BrowserImproving Game Performance in the Browser
Improving Game Performance in the BrowserFITC
 
Design that’s easy on the brain
Design that’s easy on the brainDesign that’s easy on the brain
Design that’s easy on the brainFITC
 
Jedi Mind Trick: Networking, Selling and Pitching
Jedi Mind Trick: Networking, Selling and PitchingJedi Mind Trick: Networking, Selling and Pitching
Jedi Mind Trick: Networking, Selling and PitchingFITC
 
Universal Applications
Universal ApplicationsUniversal Applications
Universal ApplicationsFITC
 
Functional Web Development
Functional Web DevelopmentFunctional Web Development
Functional Web DevelopmentFITC
 
The Life of &lt;p>
The Life of &lt;p>The Life of &lt;p>
The Life of &lt;p>FITC
 
Building Real Time, Open-Source Tools for Wikipedia
Building Real Time, Open-Source Tools for WikipediaBuilding Real Time, Open-Source Tools for Wikipedia
Building Real Time, Open-Source Tools for WikipediaFITC
 
Building Apps with Ember
Building Apps with EmberBuilding Apps with Ember
Building Apps with EmberFITC
 
Untangle The Mess In Your Team’s Process
Untangle The Mess In Your Team’s ProcessUntangle The Mess In Your Team’s Process
Untangle The Mess In Your Team’s ProcessFITC
 
It’s the Experience That Makes the Product, Not the Features
It’s the Experience That Makes the Product, Not the FeaturesIt’s the Experience That Makes the Product, Not the Features
It’s the Experience That Makes the Product, Not the FeaturesFITC
 
Making Mixed Reality Living Spaces
Making Mixed Reality Living SpacesMaking Mixed Reality Living Spaces
Making Mixed Reality Living SpacesFITC
 
How We Used To, How We Will
How We Used To, How We WillHow We Used To, How We Will
How We Used To, How We WillFITC
 
A New Era for Animators
A New Era for AnimatorsA New Era for Animators
A New Era for AnimatorsFITC
 
Here Be Dragons – Advanced JavaScript Debugging
Here Be Dragons – Advanced JavaScript DebuggingHere Be Dragons – Advanced JavaScript Debugging
Here Be Dragons – Advanced JavaScript DebuggingFITC
 
Breaking The Broken Web
Breaking The Broken WebBreaking The Broken Web
Breaking The Broken WebFITC
 
Accumulations with Nicholas Felton
Accumulations with Nicholas FeltonAccumulations with Nicholas Felton
Accumulations with Nicholas FeltonFITC
 
PageCloud Reimagines The Future of Website Creation with Craig Fitzpatrick
PageCloud Reimagines The Future of Website Creation with Craig FitzpatrickPageCloud Reimagines The Future of Website Creation with Craig Fitzpatrick
PageCloud Reimagines The Future of Website Creation with Craig FitzpatrickFITC
 
My Type of Life
My Type of LifeMy Type of Life
My Type of LifeFITC
 

Andere mochten auch (20)

Front-end Tools: Sifting Through the Madness
 Front-end Tools: Sifting Through the Madness Front-end Tools: Sifting Through the Madness
Front-end Tools: Sifting Through the Madness
 
Kickstarting Your Stupid Magazine
Kickstarting Your Stupid MagazineKickstarting Your Stupid Magazine
Kickstarting Your Stupid Magazine
 
Improving Game Performance in the Browser
Improving Game Performance in the BrowserImproving Game Performance in the Browser
Improving Game Performance in the Browser
 
Design that’s easy on the brain
Design that’s easy on the brainDesign that’s easy on the brain
Design that’s easy on the brain
 
Jedi Mind Trick: Networking, Selling and Pitching
Jedi Mind Trick: Networking, Selling and PitchingJedi Mind Trick: Networking, Selling and Pitching
Jedi Mind Trick: Networking, Selling and Pitching
 
Universal Applications
Universal ApplicationsUniversal Applications
Universal Applications
 
Functional Web Development
Functional Web DevelopmentFunctional Web Development
Functional Web Development
 
The Life of &lt;p>
The Life of &lt;p>The Life of &lt;p>
The Life of &lt;p>
 
Building Real Time, Open-Source Tools for Wikipedia
Building Real Time, Open-Source Tools for WikipediaBuilding Real Time, Open-Source Tools for Wikipedia
Building Real Time, Open-Source Tools for Wikipedia
 
Building Apps with Ember
Building Apps with EmberBuilding Apps with Ember
Building Apps with Ember
 
Untangle The Mess In Your Team’s Process
Untangle The Mess In Your Team’s ProcessUntangle The Mess In Your Team’s Process
Untangle The Mess In Your Team’s Process
 
It’s the Experience That Makes the Product, Not the Features
It’s the Experience That Makes the Product, Not the FeaturesIt’s the Experience That Makes the Product, Not the Features
It’s the Experience That Makes the Product, Not the Features
 
Making Mixed Reality Living Spaces
Making Mixed Reality Living SpacesMaking Mixed Reality Living Spaces
Making Mixed Reality Living Spaces
 
How We Used To, How We Will
How We Used To, How We WillHow We Used To, How We Will
How We Used To, How We Will
 
A New Era for Animators
A New Era for AnimatorsA New Era for Animators
A New Era for Animators
 
Here Be Dragons – Advanced JavaScript Debugging
Here Be Dragons – Advanced JavaScript DebuggingHere Be Dragons – Advanced JavaScript Debugging
Here Be Dragons – Advanced JavaScript Debugging
 
Breaking The Broken Web
Breaking The Broken WebBreaking The Broken Web
Breaking The Broken Web
 
Accumulations with Nicholas Felton
Accumulations with Nicholas FeltonAccumulations with Nicholas Felton
Accumulations with Nicholas Felton
 
PageCloud Reimagines The Future of Website Creation with Craig Fitzpatrick
PageCloud Reimagines The Future of Website Creation with Craig FitzpatrickPageCloud Reimagines The Future of Website Creation with Craig Fitzpatrick
PageCloud Reimagines The Future of Website Creation with Craig Fitzpatrick
 
My Type of Life
My Type of LifeMy Type of Life
My Type of Life
 

Ähnlich wie Ryan Christiani I Heard React Was Good

I Heard React Was Good
I Heard React Was GoodI Heard React Was Good
I Heard React Was GoodFITC
 
Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with ReactNathan Smith
 
Organized web app development using backbone.js
Organized web app development using backbone.jsOrganized web app development using backbone.js
Organized web app development using backbone.jsShakti Shrestha
 
The complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrrThe complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrrAfreenK
 
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
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in ComponentsFITC
 
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
 
JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"
JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"
JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"JSFestUA
 
Moving Large Apps to React - NYC JS
Moving Large Apps to React - NYC JSMoving Large Apps to React - NYC JS
Moving Large Apps to React - NYC JSstan229
 
Reactjs A javascript Library
Reactjs A javascript LibraryReactjs A javascript Library
Reactjs A javascript LibraryMohit Jain
 
Front-End Modernization for Mortals
Front-End Modernization for MortalsFront-End Modernization for Mortals
Front-End Modernization for Mortalscgack
 
Front end-modernization
Front end-modernizationFront end-modernization
Front end-modernizationdevObjective
 
Learn reactjs, how to code with example and general understanding thinkwik
Learn reactjs, how to code with example and general understanding   thinkwikLearn reactjs, how to code with example and general understanding   thinkwik
Learn reactjs, how to code with example and general understanding thinkwikHetaxi patel
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptAndrew Lovett-Barron
 
Welcome to React & Flux !
Welcome to React & Flux !Welcome to React & Flux !
Welcome to React & Flux !Ritesh Kumar
 
Getting Started with React.js
Getting Started with React.jsGetting Started with React.js
Getting Started with React.jsSmile Gupta
 

Ähnlich wie Ryan Christiani I Heard React Was Good (20)

I Heard React Was Good
I Heard React Was GoodI Heard React Was Good
I Heard React Was Good
 
Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with React
 
Organized web app development using backbone.js
Organized web app development using backbone.jsOrganized web app development using backbone.js
Organized web app development using backbone.js
 
The complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrrThe complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrr
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
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
 
Fame
FameFame
Fame
 
React js for beginners
React js for beginnersReact js for beginners
React js for beginners
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components
 
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]
 
JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"
JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"
JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"
 
Moving Large Apps to React - NYC JS
Moving Large Apps to React - NYC JSMoving Large Apps to React - NYC JS
Moving Large Apps to React - NYC JS
 
Reactjs A javascript Library
Reactjs A javascript LibraryReactjs A javascript Library
Reactjs A javascript Library
 
Front-End Modernization for Mortals
Front-End Modernization for MortalsFront-End Modernization for Mortals
Front-End Modernization for Mortals
 
Front end-modernization
Front end-modernizationFront end-modernization
Front end-modernization
 
Front end-modernization
Front end-modernizationFront end-modernization
Front end-modernization
 
Learn reactjs, how to code with example and general understanding thinkwik
Learn reactjs, how to code with example and general understanding   thinkwikLearn reactjs, how to code with example and general understanding   thinkwik
Learn reactjs, how to code with example and general understanding thinkwik
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate Javascript
 
Welcome to React & Flux !
Welcome to React & Flux !Welcome to React & Flux !
Welcome to React & Flux !
 
Getting Started with React.js
Getting Started with React.jsGetting Started with React.js
Getting Started with React.js
 

Mehr von FITC

Cut it up
Cut it upCut it up
Cut it upFITC
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital HealthFITC
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript PerformanceFITC
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech StackFITC
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR ProjectFITC
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerFITC
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryFITC
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday InnovationFITC
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight WebsitesFITC
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is TerrifyingFITC
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanFITC
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)FITC
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameFITC
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare SystemFITC
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignFITC
 
The Power of Now
The Power of NowThe Power of Now
The Power of NowFITC
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAsFITC
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstackFITC
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFITC
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForFITC
 

Mehr von FITC (20)

Cut it up
Cut it upCut it up
Cut it up
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital Health
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript Performance
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech Stack
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR Project
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the Answer
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s Story
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday Innovation
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight Websites
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is Terrifying
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future Human
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR Game
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare System
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product Design
 
The Power of Now
The Power of NowThe Power of Now
The Power of Now
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAs
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstack
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self Discovery
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time For
 

Kürzlich hochgeladen

WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 

Kürzlich hochgeladen (12)

WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 

Ryan Christiani I Heard React Was Good

  • 1. HI!
  • 2. ABOUT ME Ryan work HackerYou Instructor and Developer at HackerYou @Rchristiani on Twitter ryanchristiani.com letslearnes6.com
  • 6. REACT AT HACKERYOU Internal Applications Alumni
  • 7. CONSIDERATIONS How would a new developer experience a new tool. React is the new AngularJS in terms of job posting, what does that mean for us?
  • 8. WHY DO WE HAVE REACT? We have a lot of libraries and frameworks...
  • 9. Ember Angular Backbone Vue.js Mithril Tesla... I thought I made that one up, I googled it, it is a thing...
  • 10. JUST A VIEW LAYER The one key feature of the React library, is that it is really just a view layer. It is just simple components. let App = React.createClass({ render() { return ( <main> <h1>What an APP!</h1> </main> ); } });
  • 11. The problem it really solves is application state.
  • 12. Since React is just a view layer, it is more of tool in your application structure, rather than the entire application structure itself. You have freedom to build as you need.
  • 14. COMPONENTS REIGN SUPREME Components allow you to look at your app in a modular, DRY and reusable manner. Large templates can be broken down into simple, reusable components.
  • 15. NOT JUST REACT React is not the only library focusing on components, libraries like Polymer and frameworks like Ember have similar structures. Polymer is all about components, the styles and events are all wrapper up into one file. One component.
  • 16. LIFECYCLES Each component has a lifecycle. This lifecycle allows you to really take control of your components. These will run at certain points through the execution of the component.
  • 17. COMPONENTDIDMOUNT() This is a hook that will run when the component is rendered, and it will run only once. But here is where we can decide whether or not to load data.
  • 18. COMPONENTWILLUNMOUNT() A hook run before the component is unmounted, or removed. A place to clean up if needed. This reminded me of Backbone, when you had to manually clean up after yourself.
  • 19. COMPONENTS MAKE TESTING EASY. Because everything is broken up into modular parts, this allows you to isolate your components to test them.
  • 20. In general components are pretty loosely coupled, they are fairly self contained. Typically they are coupled most with the data coming into them in the form of props.
  • 21. JSX HTML in your JavaScript?! Yes. Seems weird at first Create a more intuitive templates Attach your events on the DOM....
  • 22. EVENTS IN YOUR TEMPLATES Seems counter intuitive, after all didn't we all learn to decouple events from the DOM? Declarative events on the DOM, since everything can exist in one file, it is easy to track down your events.
  • 23. let User = React.createClass({ delete() { //Delete the user }, render() { return ( <div> ... <button onclick="{this.delete}">Delete User</button> </div> ) } });
  • 24. We were also told that events on our DOM elements was bad. It tied our logic and JS to closely to the HTML, the structure of our page. The structure is becoming increasing more dynamic. Keeping our events tied to this structure now makes more sense.
  • 26. React provides us with great building blocks, but it does not provide all the pieces. This is on purpose. ...I think that can be a good thing, more on that later
  • 27. NO CLEAR PATH. However that can be confusing. When you start working with Angular, or Ember. There is a real `${library.name}-way`of doing things. little ES6 joke there...
  • 28. HOW DO YOU START A PROJECT? Since React is just one layer of your app, how do you get started?
  • 29. WEBPACK? GULP + BROWSERIFY? NPM SCRIPTS? BABELIFY?! GRUNT? JUST GOT A V1 RELEASE!
  • 30. THE EMBER WAY If you have ever worked with Ember, you know there is a very Ember way to do things. Ember has the ember-cli as a great tool to get going with!
  • 31. DATA One of the first things you will want when working with React is getting data.
  • 32. WHERE DOES IT COME FROM? Most frameworks have a preferred method of getting data. Ember has Ember Data. Angular has $http Backbone has Backbone.Model
  • 33. React has what? $.ajax, fetch, roll your own?
  • 34. IT'S UP TO YOU!
  • 35. APPLICATION FLOW. How do we handle data at an application level?
  • 36. FLUX Facebook's proposed application architecture. ...but not an actual implementation
  • 41. SPEED React is FAST! And this has pushed frameworks like Ember even further! Ember implemented its Glimmer engine based off of ideas from React.
  • 42. FORCES EXPLORATION Because there are missing pieces, it forces you or your team to explore other possibilities. What practices work best for you, each project will have a different set of requirements.
  • 43. CREATES BETTER JS DEVS It is helping to create better JS devs, not better `${framework} devs`. Too often I see people getting stuck as a framework specific developer, and not expanding on their core skills.
  • 48. PEOPLE GET AFRAID OF POSSIBILITIES. IT IS IMPORTANT TO REMEMBER.
  • 51. You don't need it all.