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

Neos - React Rewrite

Avatar for Bastian Heist 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.

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
79
Neos Fusion - A Rendering Engine for the Modern Web
Avatar for Bastian Heist beheist
0
350
Introduction to Neos
Avatar for Bastian Heist beheist
0
75
An Introduction to CSS Grid Layout
Avatar for Bastian Heist beheist
0
2.6k
Neos 3.0 and the road ahead
Avatar for Bastian Heist beheist
0
85
Neos - 0 to live in 20min
Avatar for Bastian Heist beheist
0
73
Web Animations API - Frontend UserGroup RheinMain
Avatar for Bastian Heist beheist
2
3.4k
Web Animations API - Darmstadt Designer & Developer Meetup
Avatar for Bastian Heist beheist
1
56
InspringCon Lightning Talk - Frontend Form Validation
Avatar for Bastian Heist beheist
1
340

Other Decks in Programming

See All in Programming
組込みだけじゃない！TinyGo で始める無料クラウド開発入門
Avatar for Kotaro Otaka otakakot
2
380
Pythonに漸進的に型をつける
Avatar for Nealle nealle
1
140
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
620
Towards Transactional Buffering of CDC Events @ Flink Forward 2025 Barcelona Spain
Avatar for Hans-Peter Grahsl hpgrahsl
0
120
Amazon Verified Permissions実践入門 〜Cedar活用とAppSync導入事例/Practical Introduction to Amazon Verified Permissions
Avatar for MURAKAMI Masahiko fossamagna
2
100
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
Avatar for uMa uma31
0
480
バッチ処理を「状態の記録」から「事実の記録」へ
Avatar for HideyukiKitao panda728
PRO
0
210
kiroとCodexで最高のSpec駆動開発を！！数時間で web3ネイティブなミニゲームを作ってみたよ！
Avatar for Haruki Kondo mashharuki
0
990
Vueのバリデーション、結局どれを選べばいい？ ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
Avatar for ねぎなす neginasu
3
1.7k
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
Avatar for CARTA Engineering carta_engineering
0
460
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
Avatar for aose aoseyuu
3
840
Inside of Swift Export
Avatar for giginet giginet
PRO
1
230

Featured

See All Featured
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
8
320
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
710
Code Reviewing Like a Champion
Avatar for maltzj maltzj
526
40k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
7k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
630
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5.1k

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!