the Neos React UI

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

30c0b6f50f67163bee8500aa4115d126?s=128

Sebastian Kurfürst

April 01, 2017
Tweet

Transcript

  1. 3.
  2. 5.
  3. 8.
  4. 9.
  5. 12.

    Interaction between website and Neos UI CSS Media Queries need

    adjustments JavaScript interacts with Neos UI
  6. 14.
  7. 16.
  8. 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.
  9. 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
  10. 19.
  11. 20.
  12. 21.
  13. 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
  14. 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
  15. 27.
  16. 29.
  17. 31.
  18. 32.
  19. 34.
  20. 35.
  21. 36.
  22. 38.

    we try to stay as close as possible to the

    old UI ... except we know of a serious usability issue ...
  23. 39.
  24. 43.
  25. 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 }
  26. 48.
  27. 50.

    1 Neos: 2 Neos: 3 Ui: 4 resources: 5 javascript:

    6 'Neos.Neos.UI.ExtensibilityExamples:ColorPickerEditor': 7 resource: resource://.../Public/ColorPickerEditor/Plugin.js
  28. 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 });
  29. 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 }
  30. 56.
  31. 57.
  32. 59.
  33. 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 });
  34. 61.
  35. 63.
  36. 64.
  37. 65.
  38. 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
  39. 73.