SlideShare ist ein Scribd-Unternehmen logo
1 von 53
Downloaden Sie, um offline zu lesen
AWESOME
STATEMANAGEMENT
FORREACT*
*ANDOTHERVIRTUAL-DOMLIBRARIES
Fred Daoud - @foxdonut00
WHYAWESOME?
NOTALIBRARY.ASIMPLEPATTERN.
WORKSWITHANY
VIRTUALDOMLIBRARY
VIRTUALDOMISNICE
VIEW = FUNCTION(MODEL)
“HOWDOI
MANAGESTATE?”
REDUX
MOBX
CEREBRAL
CYCLE.JS
LET'SLOOKAT
ADIFFERENTAPPROACH.
MEIOSIS
HTTP://MEIOSIS.JS.ORG
THEMEIOSISPATTERN
model ← single source of truth
view = function(model)
update model
→ view is automatically re-rendered
model = single source of truth
view = function(model)
const initialModel = { counter: 0 };
const view = model => (
<div>Counter is {model.counter}</div>
);
actions update the model
const createActions = update => ({
increment: () => update(model => {
model.counter++;
return model;
})
// after calling update(...),
// view is automatically re-rendered
});
views call actions
const createView = actions => model => (
<div>
<div>Counter is {model.counter}</div>
<button onClick={actions.increment}>Increment</button>
</div>
);
WHATISUPDATE?
HOWDOWEAUTOMATICALLY
RE-RENDERTHEVIEW?
MEIOSISPATTERNIMPLEMENTATION
Minimal streams: just map and scan
Or, write your own minimal implementation
FLYDSTREAMS
MAP
const s1 = flyd.stream();
const s2 = s1.map(value => value * 10);
s2.map(value => console.log(value));
s1(5);
s1(10);
// console output is
50
100
FLYDSTREAMS
SCAN
const s1 = flyd.stream();
const add = (x, y) => x + y;
const s2 = flyd.scan(add, 0, s1);
s2.map(value => console.log(value));
s1(5); s1(13); s1(24);
// console output is
0 5 18 42
THEMEIOSISPATTERN
const initialModel = { counter: 0 };
const update = flyd.stream();
const applyUpdate = (model, modelUpdate) => modelUpdate(model);
const models = flyd.scan(applyUpdate, initialModel, update);
const view = createView(createActions(update));
const element = document.getElementById("app");
models.map(model => ReactDOM.render(view(model), element));
USINGDIFFERENTVIRTUALDOMLIBS
models.map(model => ReactDOM.render(view(model), element));
models.map(model => Inferno.render(view(model), element));
models.map(model => m.render(element, view(model)));
models.map(model => preact.render(view(model), element,
element.lastElementChild));
const render = view => element = patch(element, view);
models.map(model => render(view(model)));
MODELUPDATE
PLAIN
update(model => {
model.counter++;
return model;
});
LODASH
LODASHFP
RAMDA
IMMUTABLE.JS
update(model => _.update(model, "counter", _.partial(_.add,1)));
update(_.update("counter", _.add(1)));
update(R.over(R.lensProp("counter"), R.add(1)));
update(model => model.update("counter", v => v + 1));
COMPONENTS
ACOMPONENTISJUST
ANOBJECTWITHFUNCTIONS
import { createActions } from "./actions";
import { createView } from "./view";
// This is the same 'update' stream ↓↓
export const createTemperature = update => ({
model: () => ({
date: "",
value: 20,
units: "C"
}),
view: createView(createActions(update))
});
TEMPERATUREEXAMPLE
ACTIONS(1/2)
export const createActions = update => ({
editDate: evt =>
update(model => {
model.date = evt.target.value;
return model;
}),
increase: amount => () =>
update(model => {
model.value = model.value + amount;
return model;
}),
ACTIONS(2/2)
changeUnits: () => update(model => {
if (model.units === "C") {
model.units = "F";
model.value = Math.round( model.value * 9 / 5 + 32 );
}
else {
model.units = "C";
model.value = Math.round( (model.value - 32) / 9 * 5 );
}
return model;
})
});
VIEW
export const createView = actions => model => (
<div>
<div>Date: <input type="text" size="10" value={model.date}
onChange={actions.editDate}/></div>
<span>Temperature: {model.value}&deg;{model.units} </span>
<div>
<button onClick={actions.increase(1)}>Increase</button>
<button onClick={actions.increase(-1)}>Decrease</button>
</div>
<div>
<button onClick={actions.changeUnits}>Units</button>
</div>
</div>
);
THEMEIOSISPATTERN
const update = flyd.stream();
const temperature = createTemperature(update); // <--------
const initialModel = temperature.model(); // <--------
const applyUpdate = (model, modelUpdate) => modelUpdate(model);
const models = flyd.scan(applyUpdate, initialModel, update);
const element = document.getElementById("app");
models.map(model =>
ReactDOM.render(temperature.view(model), // <--------
element));
MEIOSISTRACER
TIME-TRAVELDEVTOOL
MEIOSISTRACERINCHROMEDEVTOOLS
MEIOSISTRACERINPAGE
USINGMEIOSISTRACERINCHROME
Install meiosis as a dev dependency
Install the Chrome extension
// Only for using Meiosis Tracer in development.
import { trace } from "meiosis";
trace({ update, dataStreams: [ models ] });
USINGMEIOSISTRACERINPAGE
Also install meiosis-tracer as a dev dep.
<div id="tracer"></div>
// Only for using Meiosis Tracer in development.
import { trace } from "meiosis";
import meiosisTracer from "meiosis-tracer";
trace({ update, dataStreams: [ models ] });
meiosisTracer({ selector: "#tracer" });
REUSABLECOMPONENTS
REUSINGTHETEMPERATURECOMPONENT
export const createApp = update => {
const components = {
air: createTemperature(nest(update, "air")),
water: createTemperature(nest(update, "water"))
};
return {
model: () => ({
air: components.air.model(),
water: components.water.model()
}),
view: createView(components)
};
};
NESTINGTHEUPDATEFUNCTION
export const nest = (update, path) =>
modelUpdate => update(model => {
model[path] = modelUpdate(model[path]);
return model;
});
THEVIEW
export const createView = components => model => (
<div>
<h4>App</h4>
{components.air.view(model.air)}
{components.water.view(model.water)}
</div>
);
REUSINGTHETEMPERATURECOMPONENT
PATHREPETITION
const components = {
air: createTemperature(nest(update, "air")),
water: createTemperature(nest(update, "water"))
};
model: () => ({
air: components.air.model(),
water: components.air.model()
})
<div>
{components.air.view(model.air)}
{components.water.view(model)}
</div>
ELIMINATINGPATHREPETITION
const components = createComponents(update, {
air: createTemperature, // passes nest(update, "air")
water: createTemperature // also wraps view(model["water"])
});
return {
// returns { air: c.air.model(), water: c.water.model() }
model: combineComponents(components, "model"),
view: createView(components)
};
<div>
{components.air.view(model)}
{components.water.view(model)}
</div>
COMPUTEDPROPERTIES
COMPUTEDPROPERTIES(1/2)
export const createTemperature = update => {
const computed = model => {
let temp = model.value;
if (model.units === "F") {
temp = Math.round((temp - 32) * 5 / 9);
}
model.comment = (temp < 10) ? "COLD!" :
(temp > 40) ? "HOT" : "";
return model;
};
COMPUTEDPROPERTIES(2/2)
const view = createView(createActions(update));
return {
model: () => ({
date: "",
value: 20,
units: "C"
}),
view: model => view(computed(model))
// view: R.compose(view, computed)
};
};
COMPUTEDPROPERTIES
ROUTING
ROUTINGEXAMPLE
ROUTING:PAGES
export const pages = {
home: { id: "Home", tab: "Home" },
coffee: { id: "Coffee", tab: "Coffee" },
beer: { id: "Beer", tab: "Beer" },
beerDetails: { id: "BeerDetails", tab: "Beer" }
};
ROUTING:NAVIGATION
export const createNavigation = update => {
const navigate = (page, params = {}) =>
update(model => Object.assign(model, ({ page, params })));
const navigateToBeer = () => {
services.loadBeer().then(beerList => {
update(model => Object.assign(model, { beerList }));
navigate(pages.beer);
});
};
return { navigateToHome, navigateToBeer, ... };
};
ROUTING:APP
export const createApp = (update, navigation) => {
const homeComponent = createHome(update); //more...
const pageMap = {
[pages.home.id]: homeComponent, //more...
};
return {
view: model => {
const component = pageMap[model.page.id];
return (
// render tabs, model.page.tab determines active tab
{component.view(model)}
);
}
};
};
ROUTING:ROUTES
export const createRouter = navigation => {
const routes = {
"/": { id: pages.home.id,
action: navigation.navigateToHome },
"/coffee/:id?": { id: pages.coffee.id,
action: navigation.navigateToCoffee },
"/beer": { id: pages.beer.id,
action: navigation.navigateToBeer },
"/beer/:id": { id: pages.beerDetails.id,
action: navigation.navigateToBeerDetails }
};
ROUTING:RESOLVEROUTE
import Mapper from "url-mapper";
const resolveRoute = () => {
const route = document.location.hash.substring(1);
const resolved = urlMapper.map(route, routes);
if (resolved) {
resolved.match.action(resolved.values);
}
};
window.onpopstate = resolveRoute;
ROUTING:ROUTESYNC
const routeMap = Object.keys(routes).reduce((result, route) => {
result[routes[route].id] = route;
return result;
}, {});
const routeSync = model => {
const segment = routeMap[model.page.id] || "/";
const route = urlMapper.stringify(segment, model.params||{});
if (document.location.hash.substring(1) !== route) {
window.history.pushState({}, "", "#" + route);
}
};
ROUTINGEXAMPLE
MEIOSIS
Documentation • Examples
Tracer • Gitter chat
Fred Daoud • @foxdonut00
HTTP://MEIOSIS.JS.ORG

Weitere ähnliche Inhalte

Was ist angesagt?

The Ring programming language version 1.9 book - Part 14 of 210
The Ring programming language version 1.9 book - Part 14 of 210The Ring programming language version 1.9 book - Part 14 of 210
The Ring programming language version 1.9 book - Part 14 of 210Mahmoud Samir Fayed
 
International News | World News
International News | World NewsInternational News | World News
International News | World Newscojocarujanosko
 
The Ring programming language version 1.8 book - Part 12 of 202
The Ring programming language version 1.8 book - Part 12 of 202The Ring programming language version 1.8 book - Part 12 of 202
The Ring programming language version 1.8 book - Part 12 of 202Mahmoud Samir Fayed
 
Data20161007
Data20161007Data20161007
Data20161007capegmail
 
A test framework out of the box - Geb for Web and mobile
A test framework out of the box - Geb for Web and mobileA test framework out of the box - Geb for Web and mobile
A test framework out of the box - Geb for Web and mobileGlobalLogic Ukraine
 
Symfony CoP: Form component
Symfony CoP: Form componentSymfony CoP: Form component
Symfony CoP: Form componentSamuel ROZE
 
Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScriptersgerbille
 
Standford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCs
Standford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCsStandford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCs
Standford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCs彼得潘 Pan
 
How I started to love design patterns
How I started to love design patternsHow I started to love design patterns
How I started to love design patternsSamuel ROZE
 
Building Apps with Flutter - Hillel Coren, Invoice Ninja
Building Apps with Flutter - Hillel Coren, Invoice NinjaBuilding Apps with Flutter - Hillel Coren, Invoice Ninja
Building Apps with Flutter - Hillel Coren, Invoice NinjaDroidConTLV
 
Modern Android Architecture
Modern Android ArchitectureModern Android Architecture
Modern Android ArchitectureEric Maxwell
 
iOS. EventKit Framework. Work with calendars and reminders
iOS. EventKit Framework. Work with calendars and remindersiOS. EventKit Framework. Work with calendars and reminders
iOS. EventKit Framework. Work with calendars and remindersVoityuk Alexander
 
Advanced jQuery
Advanced jQueryAdvanced jQuery
Advanced jQuerysergioafp
 
Optimizing Angular Performance in Enterprise Single Page Apps
Optimizing Angular Performance in Enterprise Single Page AppsOptimizing Angular Performance in Enterprise Single Page Apps
Optimizing Angular Performance in Enterprise Single Page AppsMorgan Stone
 
Technology and Science News - ABC News
Technology and Science News - ABC NewsTechnology and Science News - ABC News
Technology and Science News - ABC Newsspiritualvictim28
 
Effective Android Data Binding
Effective Android Data BindingEffective Android Data Binding
Effective Android Data BindingEric Maxwell
 

Was ist angesagt? (20)

The Ring programming language version 1.9 book - Part 14 of 210
The Ring programming language version 1.9 book - Part 14 of 210The Ring programming language version 1.9 book - Part 14 of 210
The Ring programming language version 1.9 book - Part 14 of 210
 
Cyclejs introduction
Cyclejs introductionCyclejs introduction
Cyclejs introduction
 
International News | World News
International News | World NewsInternational News | World News
International News | World News
 
The Ring programming language version 1.8 book - Part 12 of 202
The Ring programming language version 1.8 book - Part 12 of 202The Ring programming language version 1.8 book - Part 12 of 202
The Ring programming language version 1.8 book - Part 12 of 202
 
Data20161007
Data20161007Data20161007
Data20161007
 
A test framework out of the box - Geb for Web and mobile
A test framework out of the box - Geb for Web and mobileA test framework out of the box - Geb for Web and mobile
A test framework out of the box - Geb for Web and mobile
 
Symfony CoP: Form component
Symfony CoP: Form componentSymfony CoP: Form component
Symfony CoP: Form component
 
Backbone - TDC 2011 Floripa
Backbone - TDC 2011 FloripaBackbone - TDC 2011 Floripa
Backbone - TDC 2011 Floripa
 
Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScripters
 
Standford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCs
Standford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCsStandford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCs
Standford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCs
 
How I started to love design patterns
How I started to love design patternsHow I started to love design patterns
How I started to love design patterns
 
Building Apps with Flutter - Hillel Coren, Invoice Ninja
Building Apps with Flutter - Hillel Coren, Invoice NinjaBuilding Apps with Flutter - Hillel Coren, Invoice Ninja
Building Apps with Flutter - Hillel Coren, Invoice Ninja
 
package org dev
package org devpackage org dev
package org dev
 
Modern Android Architecture
Modern Android ArchitectureModern Android Architecture
Modern Android Architecture
 
iOS. EventKit Framework. Work with calendars and reminders
iOS. EventKit Framework. Work with calendars and remindersiOS. EventKit Framework. Work with calendars and reminders
iOS. EventKit Framework. Work with calendars and reminders
 
Advanced jQuery
Advanced jQueryAdvanced jQuery
Advanced jQuery
 
Optimizing Angular Performance in Enterprise Single Page Apps
Optimizing Angular Performance in Enterprise Single Page AppsOptimizing Angular Performance in Enterprise Single Page Apps
Optimizing Angular Performance in Enterprise Single Page Apps
 
Backbone Basics with Examples
Backbone Basics with ExamplesBackbone Basics with Examples
Backbone Basics with Examples
 
Technology and Science News - ABC News
Technology and Science News - ABC NewsTechnology and Science News - ABC News
Technology and Science News - ABC News
 
Effective Android Data Binding
Effective Android Data BindingEffective Android Data Binding
Effective Android Data Binding
 

Ähnlich wie Awesome State Management for React and Other Virtual-Dom Libraries

Knockout.js presentation
Knockout.js presentationKnockout.js presentation
Knockout.js presentationScott Messinger
 
Redux for ReactJS Programmers
Redux for ReactJS ProgrammersRedux for ReactJS Programmers
Redux for ReactJS ProgrammersDavid Rodenas
 
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)Eyal Vardi
 
Building complex User Interfaces with Sitecore and React
Building complex User Interfaces with Sitecore and ReactBuilding complex User Interfaces with Sitecore and React
Building complex User Interfaces with Sitecore and ReactJonne Kats
 
Building Reusable Custom Elements With Angular
Building Reusable Custom Elements With AngularBuilding Reusable Custom Elements With Angular
Building Reusable Custom Elements With AngularIlia Idakiev
 
JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"GeeksLab Odessa
 
Google App Engine in 40 minutes (the absolute essentials)
Google App Engine in 40 minutes (the absolute essentials)Google App Engine in 40 minutes (the absolute essentials)
Google App Engine in 40 minutes (the absolute essentials)Python Ireland
 
Reactive Type-safe WebComponents
Reactive Type-safe WebComponentsReactive Type-safe WebComponents
Reactive Type-safe WebComponentsMartin Hochel
 
Chainer-Compiler 動かしてみた
Chainer-Compiler 動かしてみたChainer-Compiler 動かしてみた
Chainer-Compiler 動かしてみたAkira Maruoka
 
Применение шаблона проектирования MVVM при разработке архитектуры Windows Pho...
Применение шаблона проектирования MVVM при разработке архитектуры Windows Pho...Применение шаблона проектирования MVVM при разработке архитектуры Windows Pho...
Применение шаблона проектирования MVVM при разработке архитектуры Windows Pho...Nikolay Rumyantsev
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCpootsbook
 
Gutenberg sous le capot, modules réutilisables
Gutenberg sous le capot, modules réutilisablesGutenberg sous le capot, modules réutilisables
Gutenberg sous le capot, modules réutilisablesRiad Benguella
 
Introduction to backbone presentation
Introduction to backbone presentationIntroduction to backbone presentation
Introduction to backbone presentationBrian Hogg
 
Taming forms with React
Taming forms with ReactTaming forms with React
Taming forms with ReactGreeceJS
 
Big Data for each one of us
Big Data for each one of usBig Data for each one of us
Big Data for each one of usOSCON Byrum
 
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Librariesjeresig
 

Ähnlich wie Awesome State Management for React and Other Virtual-Dom Libraries (20)

Knockout.js presentation
Knockout.js presentationKnockout.js presentation
Knockout.js presentation
 
Redux for ReactJS Programmers
Redux for ReactJS ProgrammersRedux for ReactJS Programmers
Redux for ReactJS Programmers
 
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
 
Building complex User Interfaces with Sitecore and React
Building complex User Interfaces with Sitecore and ReactBuilding complex User Interfaces with Sitecore and React
Building complex User Interfaces with Sitecore and React
 
Building Reusable Custom Elements With Angular
Building Reusable Custom Elements With AngularBuilding Reusable Custom Elements With Angular
Building Reusable Custom Elements With Angular
 
JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"
 
Google App Engine in 40 minutes (the absolute essentials)
Google App Engine in 40 minutes (the absolute essentials)Google App Engine in 40 minutes (the absolute essentials)
Google App Engine in 40 minutes (the absolute essentials)
 
Reactive Type-safe WebComponents
Reactive Type-safe WebComponentsReactive Type-safe WebComponents
Reactive Type-safe WebComponents
 
Backbone js
Backbone jsBackbone js
Backbone js
 
Chainer-Compiler 動かしてみた
Chainer-Compiler 動かしてみたChainer-Compiler 動かしてみた
Chainer-Compiler 動かしてみた
 
Применение шаблона проектирования MVVM при разработке архитектуры Windows Pho...
Применение шаблона проектирования MVVM при разработке архитектуры Windows Pho...Применение шаблона проектирования MVVM при разработке архитектуры Windows Pho...
Применение шаблона проектирования MVVM при разработке архитектуры Windows Pho...
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
 
Gutenberg sous le capot, modules réutilisables
Gutenberg sous le capot, modules réutilisablesGutenberg sous le capot, modules réutilisables
Gutenberg sous le capot, modules réutilisables
 
Introduction to backbone presentation
Introduction to backbone presentationIntroduction to backbone presentation
Introduction to backbone presentation
 
React redux
React reduxReact redux
React redux
 
React lecture
React lectureReact lecture
React lecture
 
Taming forms with React
Taming forms with ReactTaming forms with React
Taming forms with React
 
Big Data for each one of us
Big Data for each one of usBig Data for each one of us
Big Data for each one of us
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Libraries
 

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

Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
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
 
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
 
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
 
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
 
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
 
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
 
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
 
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
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
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
 
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
 

Kürzlich hochgeladen (12)

Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
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
 
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
 
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
 
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
 
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...
 
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
 
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
 
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
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
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
 
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
 

Awesome State Management for React and Other Virtual-Dom Libraries