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

Neos - React Rewrite

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Bastian Heist Bastian Heist
September 22, 2016
Programming
0
92

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
92
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
80
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
92
Neos - 0 to live in 20min
Avatar for Bastian Heist beheist
0
81
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
60
InspringCon Lightning Talk - Frontend Form Validation
Avatar for Bastian Heist beheist
1
350

Other Decks in Programming

See All in Programming
AI Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
Takumiから考えるSecurity_Maturity_Model.pdf
Avatar for gessy0129 gessy0129
1
150
最初からAWS CDKで技術検証してもいいんじゃない？
Avatar for アキキー | Akihisa Ikeda akihisaikeda
4
160
20260315 AWSなんもわからん🥲
Avatar for Chiaki Okamoto chiilog
2
170
コーディングルールの鮮度を保ちたい / keep-fresh-go-internal-conventions
Avatar for NAGATA Hiroaki handlename
0
220
Codex CLIのSubagentsによる並列API実装 / Parallel API Implementation with Codex CLI Subagents
Avatar for 冨澤宝斗 takatty
1
110
API Platformを活用したPHPによる本格的なWeb API開発 / api-platform-book-intro
Avatar for Takashi Kanemoto ttskch
1
150
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
1
430
[SF Ruby Feb'26] The Silicon Heel
Avatar for Vladimir Dementyev palkan
0
120
OTP を自動で入力する裏技
Avatar for Megabits_mzq megabitsenmzq
0
120
どんと来い、データベース信頼性エンジニアリング / Introduction to DBRE
Avatar for nnaka2992 nnaka2992
1
310
SourceGeneratorのマーカー属性問題について
Avatar for tkym htkym
0
210

Featured

See All Featured
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.3k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
280
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
230
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.5k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
310
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k

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!