React is an open source library from Facebook for creating user interfaces. Let's see how can we create a WYSIWYG editor using it.

1. Creating a WYSIWYG editor
with React
@ipeychev
(or lets see how deep the rabbit hole goes)

2. React
A JavaScript library for building user interfaces

3. Why React?

4. Why React?
React allows you to
concentrate on the UI of
your application

5. Why React?
Instead to focus on
implementation details,
fighting with the DOM
and resolving
performance issues

6. React in a nutshell

7. React in a nutshell
Library, not a
framework
Implements one-
way reactive data
flow
Blazingly fast

8. React in a nutshell
Virtual DOM
JSX
JavaScript syntax
extension (JSX)

9. React in a nutshell
Native
applications
Isomorphic
applications
Client-side
applications

10. Creating UI with React

11. Main UI
Nested
Components
Data flow

12. Creating a component
Render the component
Update state

13. But... Isn't that slow?!
Performance

14. And rendering is fast
Virtual DOM rulez
Performance

15. Components

16. Component are state machines
You render initially the components based on the
properties
Components
Then you change their state and they will be
automatically re-rendered

17. React renders nested components
with deep hierarchy
Without compromising the performance
Components performance
(thanks to the Virtual DOM)

18. Components example
} Main
component
with nested
components
Render part
}

19. Reusable code

20. 1 var HelloWorld = React.createClass({
2 mixins: [MyMixin, YourMixin],
3
4 render: function() {
5 var a = this.getA();
6 var b = this.getB();
7
8 return (a + b);
9 }
Mixins

22. A higher-order component is a function that takes
an existing component and returns another
component that wraps it
Higher-order components

23. Properties

24. Unconditionally configure your components
Which will help you to debug and test them
Properties are immutable, they are owned by the
parent element
Properties

25. Properties
Properties

26. State

27. State
Change your components based on user actions or
data from server
When the state is updated, the component
re-renders itself.
State should be considered as private data

28. Properties vs State

29. Properties are initialized when components are
created
State is only seen on the inside of components
definitions
Properties vs State

30. Events

31. Attaching events
<button onClick={this._handleClick} ...
Attach them in DOM 0 way:

32. Events are not attached to the element itself
React is listening for all events at the top level using a
single event listener
When an event occurs, React dispatches it
accordingly
Events delegation

33. React autobinds the method to its component instance
Events autobinding
There is no need to write .bind(this):
<button onClick={this._handleClick .bind(this)}

34. Let's see how deep the rabbit hole goes

35. AlloyEditor
http://alloyeditor.com

36. An Open Source
WYSIWYG editor
built with React

38. AlloyEditor design goals

39. The developer should
be able to replace the
UI entirely
It should be accessibleź
Toolbars should
appear when needed
and where needed
The UI should be
separated from the coreƘ
The UI should be easy
to be styled
AlloyEditor design goals
It should work on all
browsers

40. AlloyEditor architecture

41. UI core Plugins, low level modules
Engine CKEditor Core
Toolbar Toolbar Toolbar
Button Button } AlloyEditor UI
based on React + our
own code around it
AlloyEditor architecture

42. Code around React
React provides the rendering part only
That is not enough

43. Core, Attributes and Events
Basic stuff is needed, for example:
OOP
Types validation
Configurations
Custom Events

44. Instantiating AlloyEditor

45. Instantiating AlloyEditor
Many editors can be instantiated on one page
1 <script>
2 var editor1 = AlloyEditor.editable('description');
3 var editor2 = AlloyEditor.editable('editable');
4 </script>

46. Selections

47. Selections
Currently there are four types:
Image Text Table Link

48. Selections
Exposed in AlloyEditor.Selections
You can add your own

49. Buttons reordering

50. Buttons reordering
1 <script>
2 AlloyEditor.Selections[2].buttons = ['bold', 'italic', 'underline', 'link', 'twitter'];
3 </script>
AlloyEditor.Selections[2] is the text selection.
Instead of hardcoding it, you can also retrieve it by enumerating it inside the array

51. Buttons reordering
1 <script>
2 AlloyEditor.Selections[2].buttons = ['italic', 'bold', 'underline', 'link', 'twitter'];
3 </script>
AlloyEditor.Selections[2] is the text selection.
Instead of hardcoding it, you can also retrieve it by enumerating it inside the array

52. Buttons reordering
1 <script>
2 _.find(AlloyEditor.Selections, function(selection) {
3 var found = selection.name === 'text';
4
5 if (found) {
6 selection.buttons = ['bold', 'italic', 'underline', 'link', 'twitter'];
7 }
8
9 return found;
10 });
11 </script>

53. Buttons reordering
1 <script>
2 _.find(AlloyEditor.Selections, function(selection) {
3 var found = selection.name === 'text';
4
5 if (found) {
6 selection.buttons = ['italic', 'bold', 'underline', 'link', 'twitter'];
7 }
8
9 return found;
10 });
11 </script>

54. Adding new buttons

55. A button is just a ReactJS module

56. 1 var ButtonH4 = React.createClass({
2 mixins: [AlloyEditor.ButtonStyle, AlloyEditor.ButtonStateClasses, AlloyEditor.ButtonActionStyle],
3
4 statics: {
5 key: 'h4'
6 },
7
8 getDefaultProps: function() {
9 return {
10 style: {
11 element: 'h4'
12 }
13 };
14 },
15
16 render: function() {
17 var cssClass = 'alloy-editor-button ' + this.getStateClasses();
18
19 return (
20 <button className={cssClass} data-type="button-h4" onClick={this.applyStyle}tabIndex={this.props.tabIndex}>
21 <span className="alloy-editor-icon-h4"></span>
22 </button>
23 );
24 }
25 });
26
27 AlloyEditor.Buttons[ButtonH4.key] = AlloyEditor.ButtonH4 = ButtonH4;

57. Adding a new button
1 <script>
2 _.find(AlloyEditor.Selections, function(selection) {
3 var found = selection.name === 'text';
4
5 if (found) {
6 selection.buttons = ['h4', 'italic', 'bold', 'underline', 'link'];
7 }
8
9 return found;
10 });
11 </script>

58. Skins!

60. Wait, there is even more!

61. More stuff available!
Drag&Drop images from Desktop to the editor
Auto link creation
Placeholder plugin
Your own toolbars and buttons!

62. Roadmap

63. Roadmap
Mobile support♥
Implement more buttons♥
Improve accessibility♥
Any ideas?

64. Demo time

65. Thanks!
Questions?
ipeychev