Tweet
Tweet

Slide 1

Slide 1 text

♥

Slide 2

Slide 2 text

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)

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

♥

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Open Source Modern CMS Intended as TYPO3 successor https://neos.io Editor Experience Developer Friendly

Slide 7

Slide 7 text

A very quick demo What is Neos?

Slide 8

Slide 8 text

Basics? React+Redux

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

state?

Slide 11

Slide 11 text

State is immutable React+Redux

Slide 12

Slide 12 text

Component Action Reducer State

Slide 13

Slide 13 text

Actions React+Redux

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Why rewrite?

Slide 16

Slide 16 text

Why rewrite?

Slide 17

Slide 17 text

Issues… Why rewrite?

Slide 18

Slide 18 text

Responsiveness Why rewrite?

Slide 19

Slide 19 text

Overflowing Styles Why rewrite?

Slide 20

Slide 20 text

Planned Features Why rewrite?

Slide 21

Slide 21 text

Extensibility Why rewrite?

Slide 22

Slide 22 text

Ecosystem Converging to Flux Pattern Why rewrite?

Slide 23

Slide 23 text

16655 lines of Ember 1.x code The Rewrite

Slide 24

Slide 24 text

Principles Action Reducer Action Reducer Action Reducer :(

Slide 25

Slide 25 text

Principles Action Reducer Reducer Reducer :)

Slide 26

Slide 26 text

The Rewrite

Slide 27

Slide 27 text

State Structure

Slide 28

Slide 28 text

State Structure

Slide 29

Slide 29 text

State Structure

Slide 30

Slide 30 text

State Structure

Slide 31

Slide 31 text

State Structure

Slide 32

Slide 32 text

Sagas

Slide 33

Slide 33 text

PlowJS - Curried Selectors

Slide 34

Slide 34 text

CSSModules + Themr

Slide 35

Slide 35 text

Tackling the iframe… ContentCanvas.js

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Tackling the iframe…

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Contributing Plan: ship React UI alpha with Neos 3.0 in December

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

https://neos.io Thank you!