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. The Neos React UI

  2. Sebastian Kurfürst @skurfuerst Better photo

  3. None
  4. exply.io

  5. None
  6. Why rewrite?

  7. some history started with UI in 2011 Ember = SproutCore2

    alpha
  8. None
  9. None
  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

  16. None
  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

  20. None
  21. None
  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

  27. None
  28. content shown in iFrame No unplanned interaction between Neos and

    the website Media Queries work
  29. None
  30. Responsive Preview Mode

  31. None
  32. fast!

  33. UI loads fast!

  34. None
  35. None
  36. None
  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 ...
  39. None
  40. extensibility

  41. Extensibility Planned Extensibility Unplanned Extensibility Supported during updates Own Risk

  42. 1. Custom Inspector Editor

  43. None
  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

  48. None
  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

  56. None
  57. None
  58. 2. custom CKEditor style

  59. None
  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 });
  61. None
  62. 3. Unplanned extensibility

  63. None
  64. <code />

  65. None
  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

  73. None