Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Neos - React Rewrite
Search
Bastian Heist
September 22, 2016
Programming
0
80
Neos - React Rewrite
My talk about the NeosCMS backend rewrite to React, held at the DarmstadtJS meetup on Sep 22, 2016.
Bastian Heist
September 22, 2016
Tweet
Share
More Decks by Bastian Heist
See All by Bastian Heist
What's new in Neos?
beheist
1
69
Neos Fusion - A Rendering Engine for the Modern Web
beheist
0
340
Introduction to Neos
beheist
0
67
An Introduction to CSS Grid Layout
beheist
0
2.5k
Neos 3.0 and the road ahead
beheist
0
81
Neos - 0 to live in 20min
beheist
0
67
Web Animations API - Frontend UserGroup RheinMain
beheist
2
3.4k
Web Animations API - Darmstadt Designer & Developer Meetup
beheist
1
53
InspringCon Lightning Talk - Frontend Form Validation
beheist
1
270
Other Decks in Programming
See All in Programming
CSC509 Lecture 06
javiergs
PRO
0
140
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
400
Golang と Erlang
taiyow
8
1.8k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
10
2.1k
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
0
200
RailsのPull requestsのレビューの時に私が考えていること
yahonda
4
1.5k
GPU Hash Table | レイトレ合宿10
yknishidate
0
360
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
2
1.5k
今日で分かる!カスタムコップの作り方
krpk1900
2
360
hotwire_or_react
harunatsujita
6
2.5k
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.6k
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
200
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
93
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
What's in a price? How to price your products and services
michaelherold
243
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Transcript
♥
Bastian Heist • 7 years as SAP Consultant / Developer
@ Merck • Freelance Web Developer since 2009 • Fulltime Web Developer @ sandstorm since 2015 • Neos since 2015 @beheist @bastianheist (Neos Slack)
None
♥
None
Open Source Modern CMS Intended as TYPO3 successor https://neos.io Editor
Experience Developer Friendly
A very quick demo What is Neos?
Basics? React+Redux
y = f(x) DOM = react(state) React+Redux
state?
State is immutable React+Redux
Component Action Reducer State
Actions React+Redux
Reducer newState = f(oldState, action) React+Redux
Why rewrite?
Why rewrite?
Issues… Why rewrite?
Responsiveness Why rewrite?
Overflowing Styles Why rewrite?
Planned Features Why rewrite?
Extensibility Why rewrite?
Ecosystem Converging to Flux Pattern Why rewrite?
16655 lines of Ember 1.x code The Rewrite
Principles Action Reducer Action Reducer Action Reducer :(
Principles Action Reducer Reducer Reducer :)
The Rewrite
State Structure
State Structure
State Structure
State Structure
State Structure
Sagas
PlowJS - Curried Selectors
CSSModules + Themr
Tackling the iframe… ContentCanvas.js
Tackling the iframe… Frame.js Component Tree <> DOM Tree!
Tackling the iframe…
Contributing https://github.com/neos/neos-ui
Contributing /neos -> old /neos! -> new
Contributing Plan: ship React UI alpha with Neos 3.0 in
December
Meetup Oct 19, 2016 - 19:00 - UDG Mainz
https://neos.io Thank you!