simplifying javascript projects with reactjs

Simplifying JavaScript Projects with ReactJS and Friends

Kevin Dangoor, Sr. Computer Scientist, Adobe 1DevDay Detroit 2014

A modern, open source text editor that understands web design.

Brackets• MIT-licensed open source

• Sponsored by Adobe with hundreds of contributors and a number of non-Adobe committers

• 13th most starred project

• Hundreds of extensions are available

• 1.0 just released 10 days ago, with Extract for Brackets

function _documentSelectionFocusChange() { var curFile = EditorManager.getCurrentlyViewedPath(); if (curFile && _hasFileSelectionFocus()) {

function _documentSelectionFocusChange() { var curFile = EditorManager.getCurrentlyViewedPath(); if (curFile && _hasFileSelectionFocus()) { var nodeFound = $("#project-‐files-‐container li").is(function (index) { var $treeNode = $(this), entry = $treeNode.data("entry"); if (entry && entry.fullPath === curFile) {

function _documentSelectionFocusChange() { var curFile = EditorManager.getCurrentlyViewedPath(); if (curFile && _hasFileSelectionFocus()) { var nodeFound = $("#project-‐files-‐container li").is(function (index) { var $treeNode = $(this), entry = $treeNode.data("entry"); if (entry && entry.fullPath === curFile) { if (!_projectTree.jstree("is_selected", $treeNode)) { if ($treeNode.parents(".jstree-‐closed").length) { //don't auto-‐expand tree to show file -‐ but remember it if parent is manually expanded later _projectTree.jstree("deselect_all"); _lastSelected = $treeNode; } else {

if (!_projectTree.jstree("is_selected", $treeNode)) { if ($treeNode.parents(".jstree-‐closed").length) { //don't auto-‐expand tree to show file -‐ but remember it if parent is manually expanded later _projectTree.jstree("deselect_all"); _lastSelected = $treeNode; } else { //we don't want to trigger another selection change event, so manually deselect //and select without sending out notifications _projectTree.jstree("deselect_all"); _projectTree.jstree("select_node", $treeNode, false); // sets _lastSelected } }

If it’s hard to test, it won’t be tested.

http://www.infoq.com/presentations/Simple-Made-Easy

simple!

composed of one thing, not combined

complect!

interweave


Simple?

easy!

near at hand

https://www.destroyallsoftware.com/talks/boundaries

Functional core, Integration shell

http://futurice.com/blog/reactive-mvc-and-the-virtual-dom/

ProjectModel

FileTreeViewModel

FileTreeView ActionCreator

React

function render(element, viewModel, projectRoot, actions, forceRender, platform) { if (!projectRoot) { return; } React.renderComponent(fileTreeView({ treeData: viewModel.treeData, selectionViewInfo: viewModel.selectionViewInfo, sortDirectoriesFirst: viewModel.sortDirectoriesFirst, parentPath: projectRoot.fullPath, actions: actions, extensions: _extensions, platform: platform, forceRender: forceRender }), element); }

var fileTreeView = React.createClass({ /** * Update for any change in the tree data or directory sorting preference. */ shouldComponentUpdate: function (nextProps, nextState) { return nextProps.forceRender || this.props.treeData !== nextProps.treeData || this.props.sortDirectoriesFirst !== nextProps.sortDirectoriesFirst || this.props.extensions !== nextProps.extensions || this.props.selectionViewInfo !== nextProps.selectionViewInfo; },

render: function () { var contents = directoryContents({ isRoot: true, parentPath: this.props.parentPath, sortDirectoriesFirst: this.props.sortDirectoriesFirst, contents: this.props.treeData, extensions: this.props.extensions, actions: this.props.actions, forceRender: this.props.forceRender, platform: this.props.platform }); return DOM.div( null, selectionBackground, contextBackground, extensionForSelection, extensionForContext, contents ); } });

directoryContents = React.createClass({ render: function () { var extensions = this.props.extensions, iconClass = extensions && extensions.get("icons") ? "jstree-‐icons" : "jstree-‐no-‐icons", ulProps = this.props.isRoot ? { className: "jstree-‐brackets jstree-‐no-‐dots " + iconClass } : null; var contents = this.props.contents, namesInOrder = _sortDirectoryContents(contents, this.props.sortDirectoriesFirst);

return DOM.ul(ulProps, namesInOrder.map(function (name) { var entry = contents.get(name); if (FileTreeViewModel.isFile(entry)) { return fileNode({ parentPath: this.props.parentPath, name: name, entry: entry, actions: this.props.actions, extensions: this.props.extensions, forceRender: this.props.forceRender, platform: this.props.platform, key: name }); } else { return directoryNode({

directoryNode = React.createClass({ mixins: [contextSettable, pathComputer, extendable], render: function () { var entry = this.props.entry, if (entry.get("rename")) { renameInput = directoryRenameInput({ actions: this.props.actions, entry: this.props.entry, name: this.props.name, parentPath: this.props.parentPath }); }

directoryNode = React.createClass({ render: function () { return DOM.li({ className: this.getClasses("jstree-‐" + nodeClass), onClick: this.handleClick, onMouseDown: this.handleMouseDown }, DOM.ins({ className: "jstree-‐icon" }, " "), renameInput, nameDisplay, childNodes); } });

handleClick: function (event) { var isOpen = this.props.entry.get("open"), setOpen = isOpen ? false : true; if (event.metaKey || event.ctrlKey) { // ctrl-‐alt-‐click toggles this directory and its children if (event.altKey) { if (setOpen) { // when opening, we only open the immediate children because // opening a whole subtree could be really slow (consider // a `node_modules` directory, for example). this.props.actions.toggleSubdirectories(this.myPath(), setOpen); this.props.actions.setDirectoryOpen(this.myPath(), setOpen); } else { // When closing, we recursively close the whole subtree. this.props.actions.closeSubtree(this.myPath()); } } else {

ActionCreator.prototype.toggleSubdirectories = function (path, openOrClose) { this.model.toggleSubdirectories(path, openOrClose).then(_saveTreeState); };

ProjectModel.prototype.toggleSubdirectories = function (path, openOrClose) { var self = this, d = new $.Deferred(); this.setDirectoryOpen(path, true).then(function () { var projectRelativePath = self.makeProjectRelativeIfPossible(path), childNodes = self._viewModel.getChildDirectories(projectRelativePath); Async.doInParallel(childNodes, function (node) { return self.setDirectoryOpen(path + node, openOrClose); }, true).then(function () { d.resolve(); }, function (err) { d.reject(err); }); }); return d.promise(); };

ProjectModel.prototype.setDirectoryOpen = function (path, open) { var projectRelative = this.makeProjectRelativeIfPossible(path), needsLoading = !this._viewModel.isPathLoaded(projectRelative), d = new $.Deferred(), self = this; if (open && needsLoading) { var parentDirectory = FileUtils.getDirectoryPath(FileUtils.stripTrailingSlash(path)); this.setDirectoryOpen(parentDirectory, true).then(function () { self._getDirectoryContents(path).then(onSuccess).fail(function (err) { d.reject(err); }); }, function (err) { d.reject(err); }); } else { onSuccess(); }

FileTreeViewModel.prototype.openPath = function (path) { this._commit(_openPath(this._treeData, path)); };

{ "subdir": { open: true, children: { "afile.js": {}, "subsubdir": { children: { "thirdsub": { children: {} } } } } } }

subdir/subsubdir/thirdsub/

{ "subdir": { open: true, children: { "afile.js": {}, "subsubdir": { children: { "thirdsub": { children: {} } } } } } }

subdir/subsubdir/thirdsub/

treeData.subdir.subsubdir.open = true; treeData.subdir.subsubdir.thirdsub.open = true;

thirdsub = treeData.subdir.subsubdir.thirdsub; newThirdSub = thirdsub.set("open", true); thirdsub !== newThirdSub; // true treeData.subdir.subsubdir.thirdsub !== newThirdSub // true treeData.subdir.subsubdir.thirdsub.open === undefined; // true

Attack of the clones

https://www.flickr.com/photos/hjmediastudios/7910348016/

thirdsub = treeData.subdir.subsubdir.thirdsub; newThirdSub = thirdsub.set("open", true); thirdsub !== newThirdSub; // true treeData.subdir.subsubdir.thirdsub !== newThirdSub // true treeData.subdir.subsubdir.thirdsub.open === undefined; // true

thirdsub = treeData.subdir.subsubdir.thirdsub; newThirdSub = thirdsub.set("open", true); newSubSubDir = subsubdir.set("thirdsub", newThirdSub); newSubDir = subdir.set("subsubdir", newSubSubDir); treeData = treeData.set("subdir", newSubDir);

FileTreeViewModel.prototype.openPath = function (path) { this._commit(_openPath(this._treeData, path)); };

FileTreeViewModel.prototype._commit = function (treeData, selectionViewInfo) { var changed = false; if (treeData && treeData !== this._treeData) { this._treeData = treeData; changed = true; } if (selectionViewInfo && selectionViewInfo !== this._selectionViewInfo) { this._selectionViewInfo = selectionViewInfo; changed = true; } if (changed) { $(this).trigger(EVENT_CHANGE); } };

–C.A.R. Hoare

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no

deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far

more difficult.”

Simple?

simple!

composed of one thing, not combined

http://www.shaffner.us/cs/papers/tarpit.pdf

Simple Architecture

• Each part does one thing with side effects in few, known places

• React lets you generate a whole UI functionally

• Immutable-JS allows you to control when data updates occur

• Every part of your application can have a consistent state

• Object identity tells you when something has changed

A modern, open source text editor that understands web design.

http://brackets.io

http://brackets.io

simplifying javascript projects with reactjs

Software