SlideShare a Scribd company logo
React, ES6, and Meteor
이상원 (leesn@bookp.al)
Agenda
React?
React loves ES6
React in Meteor
Live coding…
React vs Blaze
Summary
React
Google trends: reactjs, meteorjs
http://facebook.github.io/react/
A javascript library for building user interfaces
React Features
Virtual DOM
One-way data flow
V in MVC
Reusable components
Virtual DOM in React
DOM tree in the memory
isomorphic application with React
Data changed
DOM updated (Rendering)
Flux Architecture
React loves ES6
support ES6 from React 0.13.0
Babel (ES6 to ES5)
ECMAScript 6 (ECMAScript 2015)
Browsers NOT ready for ES6
React in Meteor
https://github.com/meteor/react-packages
meteor add react
https://github.com/reactjs/react-meteor/
meteor add reactjs:react
React packages
https://github.com/meteor/react-packages
Currently in development
react + babel
Live coding…
Hello World
Data & Forms
React + Blaze
React Components in Shine
React vs Blaze
component
isomorphic
virtual DOM
React Native
Blaze 2
Blaze 2
https://meteor.hackpad.com/Proposal-for-Blaze-2-
bRAxvfDzCVv
Blaze components
Blaze Virtual DOM
Summary
official react packages currently in development
reactjs provides reactjs:react
React : Blaze, React + Blaze ?
React Native
감사합니다.

More Related Content

Similar to React, ES6, and Meteor

JBug_React_and_Flux_2015
JBug_React_and_Flux_2015JBug_React_and_Flux_2015
JBug_React_and_Flux_2015
Lukas Vlcek
 
Corso su ReactJS
Corso su ReactJSCorso su ReactJS
Corso su ReactJS
LinkMe Srl
 
Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020
Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020
Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020
Matt Raible
 
A React Journey
A React JourneyA React Journey
A React Journey
LinkMe Srl
 
ReactJS maakt het web eenvoudig
ReactJS maakt het web eenvoudigReactJS maakt het web eenvoudig
ReactJS maakt het web eenvoudig
Rick Beerendonk
 
React, GraphQL и Relay - вполне себе нормальный компонентный подход (nodkz)
React, GraphQL и Relay - вполне себе нормальный компонентный подход (nodkz)React, GraphQL и Relay - вполне себе нормальный компонентный подход (nodkz)
React, GraphQL и Relay - вполне себе нормальный компонентный подход (nodkz)
Pavel Chertorogov
 
20150511 Meteor Angular
20150511 Meteor Angular20150511 Meteor Angular
20150511 Meteor Angular
Rick Wehrle
 
Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019
Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019
Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019
Matt Raible
 
React js basics
React js basicsReact js basics
React js basics
Maulik Shah
 
Full Stack Reactive with React and Spring WebFlux - SpringOne 2018
Full Stack Reactive with React and Spring WebFlux - SpringOne 2018Full Stack Reactive with React and Spring WebFlux - SpringOne 2018
Full Stack Reactive with React and Spring WebFlux - SpringOne 2018
Matt Raible
 
React tech talk @ CMU
React tech talk @ CMUReact tech talk @ CMU
React tech talk @ CMU
Alan Dong
 
20150415 Something About Meteor
20150415 Something About Meteor20150415 Something About Meteor
20150415 Something About Meteor
Rick Wehrle
 
30 days-of-react-ebook-fullstackio
30 days-of-react-ebook-fullstackio30 days-of-react-ebook-fullstackio
30 days-of-react-ebook-fullstackio
imdurgesh
 
Full Stack Reactive with React and Spring WebFlux - PWX 2019
Full Stack Reactive with React and Spring WebFlux - PWX 2019Full Stack Reactive with React and Spring WebFlux - PWX 2019
Full Stack Reactive with React and Spring WebFlux - PWX 2019
Matt Raible
 
Full Stack Reactive with React and Spring WebFlux Workshop - KCDC 2019
Full Stack Reactive with React and Spring WebFlux Workshop - KCDC 2019Full Stack Reactive with React and Spring WebFlux Workshop - KCDC 2019
Full Stack Reactive with React and Spring WebFlux Workshop - KCDC 2019
Matt Raible
 
Meteor intro-2015
Meteor intro-2015Meteor intro-2015
Meteor intro-2015
MeteorJS
 
React.js alternatives modern web frameworks and lightweight java script libr...
React.js alternatives  modern web frameworks and lightweight java script libr...React.js alternatives  modern web frameworks and lightweight java script libr...
React.js alternatives modern web frameworks and lightweight java script libr...
Katy Slemon
 
iPhone Web Development and Ruby On Rails
iPhone Web Development and Ruby On RailsiPhone Web Development and Ruby On Rails
iPhone Web Development and Ruby On Rails
Jose de Leon
 
Reactjs
ReactjsReactjs
React native sharing
React native sharingReact native sharing
React native sharing
Sam Lee
 

Similar to React, ES6, and Meteor (20)

JBug_React_and_Flux_2015
JBug_React_and_Flux_2015JBug_React_and_Flux_2015
JBug_React_and_Flux_2015
 
Corso su ReactJS
Corso su ReactJSCorso su ReactJS
Corso su ReactJS
 
Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020
Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020
Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020
 
A React Journey
A React JourneyA React Journey
A React Journey
 
ReactJS maakt het web eenvoudig
ReactJS maakt het web eenvoudigReactJS maakt het web eenvoudig
ReactJS maakt het web eenvoudig
 
React, GraphQL и Relay - вполне себе нормальный компонентный подход (nodkz)
React, GraphQL и Relay - вполне себе нормальный компонентный подход (nodkz)React, GraphQL и Relay - вполне себе нормальный компонентный подход (nodkz)
React, GraphQL и Relay - вполне себе нормальный компонентный подход (nodkz)
 
20150511 Meteor Angular
20150511 Meteor Angular20150511 Meteor Angular
20150511 Meteor Angular
 
Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019
Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019
Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019
 
React js basics
React js basicsReact js basics
React js basics
 
Full Stack Reactive with React and Spring WebFlux - SpringOne 2018
Full Stack Reactive with React and Spring WebFlux - SpringOne 2018Full Stack Reactive with React and Spring WebFlux - SpringOne 2018
Full Stack Reactive with React and Spring WebFlux - SpringOne 2018
 
React tech talk @ CMU
React tech talk @ CMUReact tech talk @ CMU
React tech talk @ CMU
 
20150415 Something About Meteor
20150415 Something About Meteor20150415 Something About Meteor
20150415 Something About Meteor
 
30 days-of-react-ebook-fullstackio
30 days-of-react-ebook-fullstackio30 days-of-react-ebook-fullstackio
30 days-of-react-ebook-fullstackio
 
Full Stack Reactive with React and Spring WebFlux - PWX 2019
Full Stack Reactive with React and Spring WebFlux - PWX 2019Full Stack Reactive with React and Spring WebFlux - PWX 2019
Full Stack Reactive with React and Spring WebFlux - PWX 2019
 
Full Stack Reactive with React and Spring WebFlux Workshop - KCDC 2019
Full Stack Reactive with React and Spring WebFlux Workshop - KCDC 2019Full Stack Reactive with React and Spring WebFlux Workshop - KCDC 2019
Full Stack Reactive with React and Spring WebFlux Workshop - KCDC 2019
 
Meteor intro-2015
Meteor intro-2015Meteor intro-2015
Meteor intro-2015
 
React.js alternatives modern web frameworks and lightweight java script libr...
React.js alternatives  modern web frameworks and lightweight java script libr...React.js alternatives  modern web frameworks and lightweight java script libr...
React.js alternatives modern web frameworks and lightweight java script libr...
 
iPhone Web Development and Ruby On Rails
iPhone Web Development and Ruby On RailsiPhone Web Development and Ruby On Rails
iPhone Web Development and Ruby On Rails
 
Reactjs
ReactjsReactjs
Reactjs
 
React native sharing
React native sharingReact native sharing
React native sharing
 

Recently uploaded

Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j
 
May Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdfMay Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdf
Adele Miller
 
GOING AOT WITH GRAALVM FOR SPRING BOOT (SPRING IO)
GOING AOT WITH GRAALVM FOR  SPRING BOOT (SPRING IO)GOING AOT WITH GRAALVM FOR  SPRING BOOT (SPRING IO)
GOING AOT WITH GRAALVM FOR SPRING BOOT (SPRING IO)
Alina Yurenko
 
APIs for Browser Automation (MoT Meetup 2024)
APIs for Browser Automation (MoT Meetup 2024)APIs for Browser Automation (MoT Meetup 2024)
APIs for Browser Automation (MoT Meetup 2024)
Boni García
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptxLORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
lorraineandreiamcidl
 
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise EditionWhy Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Envertis Software Solutions
 
What is Augmented Reality Image Tracking
What is Augmented Reality Image TrackingWhat is Augmented Reality Image Tracking
What is Augmented Reality Image Tracking
pavan998932
 
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
Peter Muessig
 
Transform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR SolutionsTransform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR Solutions
TheSMSPoint
 
socradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdfsocradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdf
SOCRadar
 
SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024
Hironori Washizaki
 
Empowering Growth with Best Software Development Company in Noida - Deuglo
Empowering Growth with Best Software  Development Company in Noida - DeugloEmpowering Growth with Best Software  Development Company in Noida - Deuglo
Empowering Growth with Best Software Development Company in Noida - Deuglo
Deuglo Infosystem Pvt Ltd
 
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
Łukasz Chruściel
 
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdfRevolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
Undress Baby
 
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of CodeA Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
Aftab Hussain
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
Drona Infotech
 
GreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-JurisicGreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-Jurisic
Green Software Development
 
Fundamentals of Programming and Language Processors
Fundamentals of Programming and Language ProcessorsFundamentals of Programming and Language Processors
Fundamentals of Programming and Language Processors
Rakesh Kumar R
 
Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604
Fermin Galan
 
E-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet DynamicsE-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet Dynamics
Hornet Dynamics
 

Recently uploaded (20)

Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
 
May Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdfMay Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdf
 
GOING AOT WITH GRAALVM FOR SPRING BOOT (SPRING IO)
GOING AOT WITH GRAALVM FOR  SPRING BOOT (SPRING IO)GOING AOT WITH GRAALVM FOR  SPRING BOOT (SPRING IO)
GOING AOT WITH GRAALVM FOR SPRING BOOT (SPRING IO)
 
APIs for Browser Automation (MoT Meetup 2024)
APIs for Browser Automation (MoT Meetup 2024)APIs for Browser Automation (MoT Meetup 2024)
APIs for Browser Automation (MoT Meetup 2024)
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptxLORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
 
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise EditionWhy Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
 
What is Augmented Reality Image Tracking
What is Augmented Reality Image TrackingWhat is Augmented Reality Image Tracking
What is Augmented Reality Image Tracking
 
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
 
Transform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR SolutionsTransform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR Solutions
 
socradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdfsocradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdf
 
SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024
 
Empowering Growth with Best Software Development Company in Noida - Deuglo
Empowering Growth with Best Software  Development Company in Noida - DeugloEmpowering Growth with Best Software  Development Company in Noida - Deuglo
Empowering Growth with Best Software Development Company in Noida - Deuglo
 
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
 
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdfRevolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
 
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of CodeA Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
 
GreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-JurisicGreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-Jurisic
 
Fundamentals of Programming and Language Processors
Fundamentals of Programming and Language ProcessorsFundamentals of Programming and Language Processors
Fundamentals of Programming and Language Processors
 
Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604
 
E-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet DynamicsE-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet Dynamics
 

React, ES6, and Meteor