Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Neos - React Rewrite

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Bastian Heist Bastian Heist
September 22, 2016
Programming
0
90

Neos - React Rewrite

My talk about the NeosCMS backend rewrite to React, held at the DarmstadtJS meetup on Sep 22, 2016.

Avatar for Bastian Heist

Bastian Heist

September 22, 2016
Tweet

More Decks by Bastian Heist

See All by Bastian Heist
What's new in Neos?
Avatar for Bastian Heist beheist
1
86
Neos Fusion - A Rendering Engine for the Modern Web
Avatar for Bastian Heist beheist
0
360
Introduction to Neos
Avatar for Bastian Heist beheist
0
79
An Introduction to CSS Grid Layout
Avatar for Bastian Heist beheist
0
2.7k
Neos 3.0 and the road ahead
Avatar for Bastian Heist beheist
0
90
Neos - 0 to live in 20min
Avatar for Bastian Heist beheist
0
77
Web Animations API - Frontend UserGroup RheinMain
Avatar for Bastian Heist beheist
2
3.5k
Web Animations API - Darmstadt Designer & Developer Meetup
Avatar for Bastian Heist beheist
1
59
InspringCon Lightning Talk - Frontend Form Validation
Avatar for Bastian Heist beheist
1
350

Other Decks in Programming

See All in Programming
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
180
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
540
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
そのAIレビュー、レビューしてますか？ / Are you reviewing those AI reviews?
Avatar for r-kagaya rkaga
6
4.5k
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
660
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
220
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
970
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
Avatar for kanamsasa kanamasa
11
6.3k
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
400
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
1
220
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
500

Featured

See All Featured
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
210
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
0
71
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
54
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.8k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
200
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
88
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
150

Transcript

  1. ♥

  2. 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)
  3. None

  4. ♥

  5. None

  6. Open Source Modern CMS Intended as TYPO3 successor https://neos.io Editor

    Experience Developer Friendly

  7. A very quick demo What is Neos?

  8. Basics? React+Redux

  9. y = f(x) DOM = react(state) React+Redux

  10. state?

  11. State is immutable React+Redux

  12. Component Action Reducer State

  13. Actions React+Redux

  14. Reducer newState = f(oldState, action) React+Redux

  15. Why rewrite?

  16. Why rewrite?

  17. Issues… Why rewrite?

  18. Responsiveness Why rewrite?

  19. Overflowing Styles Why rewrite?

  20. Planned Features Why rewrite?

  21. Extensibility Why rewrite?

  22. Ecosystem Converging to Flux Pattern Why rewrite?

  23. 16655 lines of Ember 1.x code The Rewrite

  24. Principles Action Reducer Action Reducer Action Reducer :(

  25. Principles Action Reducer Reducer Reducer :)

  26. The Rewrite

  27. State Structure

  28. State Structure

  29. State Structure

  30. State Structure

  31. State Structure

  32. Sagas

  33. PlowJS - Curried Selectors

  34. CSSModules + Themr

  35. Tackling the iframe… ContentCanvas.js

  36. Tackling the iframe… Frame.js Component Tree <> DOM Tree!

  37. Tackling the iframe…

  38. Contributing https://github.com/neos/neos-ui

  39. Contributing /neos -> old /neos! -> new

  40. Contributing Plan: ship React UI alpha with Neos 3.0 in

    December

  41. Meetup Oct 19, 2016 - 19:00 - UDG Mainz

  42. https://neos.io Thank you!