the Neos React UI

Unveiling the Neos React UI at NeosCon 2017 on 1st of April in Hamburg. Watch the talk at https://youtu.be/bbT0Uu3KFuI?t=1h57m23s

Transcript

1. The Neos React UI
2. Sebastian Kurfürst @skurfuerst Better photo
4. exply.io
6. Why rewrite?
7. some history started with UI in 2011 Ember = SproutCore2 alpha
10. Editing Speed
11. Customization is hard unplanned extensibility not possible not many planned extension points
12. Interaction between website and Neos UI CSS Media Queries need adjustments JavaScript interacts with Neos UI
13. Rewrite vs. fixing
14. React
15. Wilhelm Tyll
17. React has grown temendously! React+Redux feels almost like synchronous coding. Extremely predictable! Quite fast by default, can be easly optimized to be fast-as-hell.
18. Wilhelm Tyll Sebastian Dmitri Max Strübing Philipp Bucher Christopher Hlubek Bastian Heist Markus Goldbeck Samuel Hauser Michael Berhorst Christian Mueller Manuel Lehner Samuel Ryzycki Florian Heinze Christoph Daehne Aske Ertmann Dominique Feyer Gerhard Boden Sebastian Helzle
19. demo
22. main features
23. should (mostly) work like before inline content editing document tree structure tree inspector image editor reference editor inspector views content constraints publishing dimension switcher node tree drag&drop edit & preview modes inline links to other nodes inspector validators
24. currently missing file upload editor references editor links to assets links to external URLs node tree search/filter unstable: reference editor editor data sources assets editor target workspace selector
25. extensible
26. using CKEditor Robust Sanitizing Custom CSS classes possible Keyboard Shortcuts
28. content shown in iFrame No unplanned interaction between Neos and the website Media Queries work
30. Responsive Preview Mode
32. fast!
33. UI loads fast!
37. create node wizard
38. we try to stay as close as possible to the old UI ... except we know of a serious usability issue ...
40. extensibility
41. Extensibility Planned Extensibility Unplanned Extensibility Supported during updates Own Risk
42. 1. Custom Inspector Editor
44. create package.json
45. // .../Resources/Private/JavaScript/ColorPickerEditor/package.json 1 { 2 "scripts": { 3 "build": "neos-react-scripts build", 4 "watch": "neos-react-scripts watch" 5 }, 6 "devDependencies": { 7 "@neos-project/neos-ui-extensibility": "*" 8 }, 9 "neos": { 10 "buildTargetDirectory": "../../Public/ColorPickerEditor" 11 }, 12 "dependencies": { 13 "react-color": "^2.11.1" 14 } 15 }
46. // .../Resources/Private/JavaScript/ColorPickerEditor/src/index.js console.load('loaded...')
47. run the watcher
49. load the generated code
50. 1 Neos: 2 Neos: 3 Ui: 4 resources: 5 javascript: 6 'Neos.Neos.UI.ExtensibilityExamples:ColorPickerEditor': 7 resource: resource://.../Public/ColorPickerEditor/Plugin.js
51. implement the editor!
52. // index.js require('./manifest');
53. // manifest.js 1 import manifest from '@neos-project/neos-ui-extensibility'; 2 3 import ColorPickerEditor from './ColorPickerEditor'; 4 5 manifest('Neos.Neos.Ui.ExtensibilityExamples:ColorPickerEditor', {}, 6 globalRegistry => { 7 const editorsRegistry = globalRegistry.get('inspector').get('editors'); 8 9 editorsRegistry.add('Neos.Neos.Ui.ExtensibilityExamples/ColorPickerEditor', { 10 component: ColorPickerEditor 11 }); 12 });
54. // ColorPickerEditor.js 1 import React, {PropTypes, PureComponent} from 'react'; 2 import { SketchPicker } from 'react-color'; 3 4 export default class ColorPickerEditor extends PureComponent { 5 6 static propTypes = { 7 value: PropTypes.string, 8 commit: PropTypes.func.isRequired, 9 }; 10 11 handleChangeColor = newColor => { 12 this.props.commit(newColor.hex); 13 }; 14 15 render() { 16 return (<div> 17 <SketchPicker color={this.props.value} 18 onChange={this.handleChangeColor}/> 19 </div>); 20 } 21 }
55. include the editor in NodeTypes.yaml
58. 2. custom CKEditor style
60. 1 import manifest from '@neos-project/neos-ui-extensibility'; 2 import {IconButton} from '@neos-project/react-ui-components'; 3 4 manifest('main', {}, globalRegistry => { 5 const richtextToolbar = globalRegistry.get('richtextToolbar'); 6 7 richtextToolbar.add('Neos.Neos.Ui.ExtensibilityExamples:MyCustomButton1', 8 { 9 formattingRule: 'Neos.Neos.Ui.ExtensibilityExamples:MyCustomSpan', 10 component: IconButton, 11 callbackPropName: 'onClick', 12 13 icon: 'facebook', 14 hoverStyle: 'brand' 15 }); 16 17 const formattingRules = globalRegistry.get('ckEditor').get( 18 'formattingRules'); 19 20 formattingRules.add('Neos.Neos.Ui.ExtensibilityExamples:MyCustomSpan', { 21 style: {element: 'span', attributes: {style: 'background-color: red'}}, 22 config: formattingRules.config.addToExtraAllowedContent('span[style]') 23 }); 24 25 26 });
62. 3. Unplanned extensibility
64. <code />
66. 1.0.0 Beta 1
67. time old UI default new UI in Beta new UI old UI deprecated old UI removed Neos 4.0 Neos 3.1 3.2 still includes the old UI! new UI default for new projects 3.3 LTS
68. can be installed alongside the old UI ... on development machines
69. Installation composer require --dev neos/neos-ui:dev-master neos/neos-ui-compiled:dev-master
70. Usage your-website.com/neos!
71. Try it now!
72. Give feedback! Slack: #project-ui-rewrite