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
86
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
79
Neos Fusion - A Rendering Engine for the Modern Web
beheist
0
350
Introduction to Neos
beheist
0
75
An Introduction to CSS Grid Layout
beheist
0
2.6k
Neos 3.0 and the road ahead
beheist
0
85
Neos - 0 to live in 20min
beheist
0
73
Web Animations API - Frontend UserGroup RheinMain
beheist
2
3.4k
Web Animations API - Darmstadt Designer & Developer Meetup
beheist
1
55
InspringCon Lightning Talk - Frontend Form Validation
beheist
1
320
Other Decks in Programming
See All in Programming
React 使いじゃなくても知っておきたい教養としての React
oukayuka
13
1.6k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
2
220
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
110
Go製CLIツールをnpmで配布するには
syumai
0
760
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
Understanding Kotlin Multiplatform
l2hyunwoo
0
230
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
350
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
710
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
470
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
650
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Practical Orchestrator
shlominoach
189
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
BBQ
matthewcrist
89
9.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Navigating Team Friction
lara
187
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Adopting Sorbet at Scale
ufuk
77
9.5k
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!