Presentation at Webstores on the 11th of April 2018

1. What is new in Sulu
2.0
Or how easy it can be to customize a
great administration interface

2. I'm Daniel Rotter
@danrot90 | https://github.com/danrot
core developer and
support guru.
Passionate traveler and
soccer player.

3. Who has already used
Sulu?

4. Who has added
something to the admin?

5. Status Quo

9. const a = 1;
a = 2; // TypeError: Assignment to constant variable.
const obj = {};
obj.foo = 'bar';

10. // lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
// app.js
import {sum, pi} from 'lib/math';
sum(pi, 5);

11. const a = [1, 2, 3];
const b = [4, 5, 6];
console.log([...a, ...b, 7]); // outputs [1, 2, 3, 4, 5, 6, 7]
const c = {a: 1, b: 2};
console.log({...c, b: 5}); // outputs {a: 1, b: 5}

12. const arr = ['a', 'b'];
arr.values(); // returns iterator with ['a', 'b']
arr.keys(); // returns iterator with [0, 1]
arr.entries(); // returns iterator with [[0, 'a'], [1, 'b']]
arr.findIndex(value => value == 'b'); // returns 1
arr.includes('b'); // return true

13. class Foo extends Bar {
constructor(id) {
super(id);
}
getId() {
return super.id;
}
static getType() {
return 'FOO';
}
}

14. const Foo = {
title: 'Bar',
ids: [1, 2, 3, 4, 5],
print() {
this.ids.forEach((id) => {
console.log(this.title + id);
});
}
};

16. // @flow
function square(n: number): number {
return n * n;
}
// Cannot call `square` with `"2"` bound to `n` because string is
incompatible with number
square("2");

18. class App extends React.Component {
state = {
value: '',
};
handleChange = (event) => {
this.setState({
value: event.currentTarget.value
});
}
render() {
return <Input
value={this.state.value}
onChange={this.handleChange} />;
}
}
class Input extends React.Component {
render() {
const {value: v, onChange} =
this.props;
return <input
type="text"
value={v}
onChange={onChange}
style={
{
borderColor: v.length < 3
? 'red': undefined
}
} />;
}
}

20. import {observable} from 'mobx';
import {observer} from 'mobx-react';
class AppState {
@observable content = 'Hello World!';
}
@observer
class App extends React.Component {
render() {
return <h1>
{this.props.state.content}
</h1>;
}
}
const appState = new AppState();
ReactDOM.render(
<App state={appState} />,
document.getElementById('app')
);
setTimeout(() => {
appState.content = 'Hello Earth!';
}, 1000);

22. import sum from './sum';
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
import {render} from 'enzyme';
import Component from './Component';
test('renders component correctly', () => {
expect(render(<Component />))
.toMatchSnapshot();
})

24. import React from 'react';
import classNames from 'classnames';
import componentStyles from './component.scss';
export default class Component extends React.Component {
render() {
const divClass = classNames(
componentStyles.component,
{
[componentStyles.invalid]: this.props.invalid,
}
);
return <div className={divClass}>Test</div>
}
}

25. Sulu 2.0 Frontend
Architecture

26. Components
Containers Views
Services
Stores

27. Sulu 2.0 Backend
Adjustments

28. class SnippetAdmin extends Admin {
public function getRoutes(): array {
return [
(new Route('sulu_snippet.datagrid', '/snippets/:locale',
'sulu_admin.datagrid'))
->addOption('title', 'sulu_snippet.snippets')
->addOption('resourceKey', 'snippets')
->addOption('adapters', ['table'])
->addOption('addRoute', 'sulu_snippet.add_form.detail')
->addOption('editRoute', 'sulu_snippet.edit_form.detail')
->addOption('locales', $snippetLocales)
->addAttributeDefault('locale', $snippetLocales[0]),,
];
}
}

29. class SnippetAdmin extends Admin {
public function getNavigationV2(): Navigation {
$rootNavigationItem = $this->getNavigationItemRoot();
if ($this->securityChecker->hasPermission('sulu.global.snippets', 'view')) {
$snippet = new NavigationItem('sulu_snippet.snippets');
$snippet->setPosition(20);
$snippet->setIcon('su-snippet');
$snippet->setAction('snippet/snippets');
$snippet->setMainRoute('sulu_snippet.datagrid');
$rootNavigationItem->addChild($snippet);
}
return new Navigation($rootNavigationItem);
}
}

30. {
"firstName": {
"label": "Vorname",
"type": "text_line",
"size": 6,
"required": true
},
"lastName": {
"label": "Nachname",
"type": "text_line",
"size": 6,
"required": true
}
}

31. {
"required": [
"formOfAddress",
"firstName",
"lastName"
]
}

32. {
"firstName": {
"name": "firstName",
"label": "First name",
"type": "string"
},
"lastName": {
"name": "lastName",
"label": "Last name",
"type": "string"
},
}

33. Live Coding