Frontin like-a-backer

Frontin' Like
A Back-er
by @frankdejonge

2 million downloads, thank you!

There's no other
option than using
JavaScript.
- most of my friends

JavaScript is a
means to an end.
- almost all of my friends

If JavaScript is
required, I'll hire
somebody.
- my friends who have companies

If we hate something,
why do we do it?

We all like the result:
Snappy UI / UX

I made a server
browser do this!

Loving JavaScript
Hating JavaScript
Dealing with JavaScript

Take a step back.
React Reflect

$(window).load(function () {
$('a.external-link').on('click', function clickHandler (e) {
e.preventDefault();
if (confirm('Really?')) {
$(this).off('click', clickHandler).click();
}
});
});

This is not separation of concerns.
<a class="hide-me">Click and I'll disappear</a>
<script type="application/javascript">
$('a.hide_me').on('click', function (e) {
e.preventDefault();
$(this).hide();
});
</script>
It's error-prone.

Result driven
approach.
Just enough code to make it work.

Not good enough.
Doesn't supply what I
need.

We need:
1. Generated Elements; Templates?
2. XHR requests; Obviously, it's the future.
3. Data Handling; Models? Collections?

Our saviours:
Backbone.js, Ember.js,
Angular.js

Backbone.JS: You figure it out.
var DocumentRow = Backbone.View.extend({
tagName: "li",
className: "document-row",
events: {
"click .icon": "open",
},
initialize: function() {
this.listenTo(this.model, "change", this.render);
},
render: function() {
var idea = 'I have none';
}
});

Angular.JS: ng-whatever.
<html ng-app="phonecatApp">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>

Ember.JS: Handlebars / Mustache.
23 page doc needed to
explain views.

You don't like JS and
HTML; here's
something different.

Back-end flow:
Receive HTTP Request.
Process & Collect Data.
Send Data => Template Engine.
Send HTTP Response.

Current Application
State in HTML

Declarative
<h1 class="hello">Hello World!</h1>

Composable
<div class="hello">
<h1 class="hello__message">Hello World!</h1>
</div>

State & Behaviour
<input type="checkbox" checked/>

Why can't it just be like that?
Just the UI
Just like HTML

Define
var HelloWorld = React.createClass({
render: function () {
return <h1>Hello, World!</h1>;
}
});

Use
React.render(
<HelloWorld/>,
document.getElementById('root')
);

HTML in my JS?!
What The Fudge!

JSX is just a DSL for
HTML in JavaScript

Sugar
return <h1>Hello, World!<h1>;
}
});

Desugared
return React.createElement(
'h1',
{className: 'hello_world'},
'Hello, World!'
);
}
});

Just like HTML:
It's declarative
<ModalWindow/>

Just like HTML:
You can pass
properties
<ModalWindow opened={true}/>

Just like HTML:
It's composable.
<ModalWindow>
<ModalHeader title="Hello World"/>
<ModalBody>
...
</ModalBody>
</ModalWindow>

It shows intent.
<ProfileEditor>
<Username />
<ProfilePicture />
<Biography />
</ProfileEditor>

But where do I put my data?
React is all about the bass UI.

What is data in the UI?
Properties & State

var Badge = React.createClass({
return <div className="badge">
<h1>{this.props.name}</h1>
<div>;
}
});
React.render(
<Badge name="Kayla" />,
document.getElementById('root')
);

Back-end data flow:
1. Receive an HTTP request.
2. Process + Get relevant data.
3. Respond with a rendered view.

Back-end data flow:
1. Action (intention)
2. Domain (business stuff)
3. Response (json/html/ ... xml?)

How does this map to
JavaScript / React?

Front-end data flow:
2. Domain (?)
3. Response (React)

Front-end data flow:
2. Store / Services (data layer)
3. Response (React)

Stores hold the
application state.

Flux is only a pattern
There are many implementations already.

/actions/
/stores/
/components/

/alt.js
/actions/TodoActions.js
/stores/TodoStore.js
/components/TodoApplication.js
/components/TodoList.js

import Alt from 'alt';
let alt = new Alt();
export default alt;

// actions/TodoActions.js
import alt from '../alt';
class TodoActions {
createTodo (task) {
this.dispatch({ task });
}
}
export default alt.createActions(TodoActions);

// stores/TodoStore.js
import TodoActions from '../actions/TodoActions';
class TodoStore {
constructor() {
this.todos = [];
this.bindListeners({
handleCreatedTodo: TodoActions.CREATE_TODO
});
}
handleCreatedTodo (todo) {
this.todos.push(todo);
}
}
export default alt.createStore(TodoStore, 'TodoStore');

import React from 'react';
var TodoApplication = React.createClass({
render() {
var todoList = this.state.todos.map(function (todo, index) {
return <li key={index}>{todo.task}</li>;
});
return <div className="todos">
<ul className="todo__list">
{todoList}
</ul>
<input type="text"/>
</div>;
}
});

import TodoStore from '../stores/TodoStore';
componentWillMount () {
TodoStore.listen(this.handleChange);
}
componentWillUnmount () {
TodoStore.unlisten(this.handleChange);
}
handleChange (state) {
this.setState(state);
}
getInitialState() {
return TodoStore.getState();
}
});

render() {
var todoList = this.state.todos.map(function (todo, index) {
});
<ul className="todo__list">
{todoList}
</ul>
</div>;
}
});

var TodoList = React.createClass({
render() {
var todoList = this.props.todos.map(function (todo, index) {
});
return <ul className="todo__list">
{todoList}
</ul>;
}
});

import TodoList from './TodoList';
render() {
<TodoList todos={this.state.todos} />
</div>;
}
});

import TodoList from './TodoList';
handleCreateTodo (event) {
if (event.keyCode !== 13) return;
var task = event.target.value;
TodoAction.createTodo(task);
}
render() {
<TodoList todos={this.state.todos} />
<input type="text" onKeyDown={this.handleCreateTodo}/>
</div>;
}
});

So, what about my
Laravel App?

// routes.php
$app->post('/todos', function (Request $request) {
$todo = $request->json()->all();
// Store the TODO
return new JsonResponse($todo->all());
});

class TodoStore {
handleCreatedTodo (todo) {
fetch('/todos', {
method: 'post',
body: JSON.stringify(todo)
}).then((response) => {
this.todos.push(response.json());
this.emitChange();
});
}
}
export default alt.createStore(TodoStore, 'TodoStore');

Writing front-end code, like back-end code.
It's all about data-flow.

Complexity should be facilitated.
Choose a tool that
supports it.

Declarative UI
across the board.

Frontin like-a-backer

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Similar to Frontin like-a-backer

Similar to Frontin like-a-backer (20)

Recently uploaded

Recently uploaded (20)

Frontin like-a-backer