Web frontend is an app too!
Jakub Baierl

Before
Using MVP frameworks - PHP Symfony, Nette, Laravel, Wordpress
Non static websites - web frontend dependent of backend
Web frontend as a part of backend - only templates, no possibility of code
reusing, no flexibility
Slow performance
Hard build and deploy process - installing packages for whole system

Now
Simple Scalability - few files hosted even on different server, focus on my
application - not whole infrastructure
Communication via API
Modularity - more suitables technologies for different problems
Increased Flexibility - using API for web, mobile app, public expose
Separate build and deploy

How to choose
the right technology?

Who will win? Client’s wish,
common sense or our pride?
Web frontend is independent -> huge market of frameworks & libs
Constant changes or hard resets on dev stacks
Build app on unsuitable technology

Requirements
Administrative part - fetching data from API, huge number of forms,
dynamic part - graphs, sorting lists, maps

Requirements
Administrative part - fetching data from API, huge number of forms,
dynamic part - graphs, sorting lists, maps

Requirements
Client app - fetching data from API, loading data once (mobile app base),
temporary saving data, custom responsive layout, SEO

Requirements
Client app - fetching data from API, loading data once (mobile app base),
temporary saving data, custom responsive layout, SEO

Prepared packages
Static websites - pure HTML, SASS, JS
Static websites with support of multiple languages or dynamic elements or
SEO - Middleman generator of static sites
Dynamic websites with fast communication with API - React (server
rendering for seo), Webpack
Nonpublic administration (internal) systems - React, Webpack, Redux

Choose from the magic pouch

Chosen heroes
React - Layout, Components, App structure, Server-rendering (microsite)
Fetch API - Getting data from API
Redux - Data flow, App state
Sass - CSS preprocessor, design

React
component-based javascript library
only for user interface
prepared events - onClick, onHover
virtual DOM

Containers
class CarContainer extends Component {
constructor(props) {
super(props);
}
render = () => {
return (
<Loader show={this.props.isFetching}>
{this.props.car ?
<CarComponent car={car}/>
: null}
</Loader>
);
}
}
export default connect(state => ({
isFetching: state.carIsFetching,
car: state.car,
}),
(dispatch) => ({
carActions: bindActionCreators(carActions, dispatch)
})
)(CarContainer);

Components
class CarComponent extends Component {
constructor(props) {
super(props);
};
componentWillMount () {}
componentDidMount () {}
render() {
return (
<div>
<p>{this.props.car.name}</p>
</div>
);
};
};
export default CarComponent;

Managing data
stop using carcinogenic CALLBACKS
button -> click ->wait for callback ….. confusion
NOW -> unidirectional data flow -> button -> click -> make action ->
change application state -> components reload

Redux

CSS before
Huge files
No code reusing
Non-objective
No flexibility - change color of app - change on 100 lines
—> use CSS preprocessors - Less, Sass, Stylus

Sass now!
Variables
Nesting
Mixins - code reusing
Imports - different libraries
Math - width: (100%+35)
Simply awesome <3

Variables & Nesting
//Prague open fesival 2017
$main_colour_1: #0C4D78
$main_colour_2: #0f4064
$second_colour: #F7966B
$bg_colour: #ffffff
$contrast_colour: #000000
$text_colour_1: #000000
$text_colour_2: #ffffff
=====================================================
// Testing of sass loader
@import "../../common.sass"
@import "../../../../variables.sass"
.Header
background-color: $main_colour_1
&-logo
float: left
img
width: 100%

Building the web app
Transpiling to browser language - from JSX, ES6 …
Translate Sass files to CSS files
Livereloading - realtime watching for changes and reloading app
Different data for development and production
Tools: Gulp, Grunt, Webpack

module bundler
dependency graph -> bundles
-> browser can load it
building
watching
transpiling
extracting
minifying
uglyfying
livereload support
development vs. production
Webpack

var Webpack = require('webpack');
var LiveReloadPlugin = require('webpack-livereload-plugin');
var GlobalConfig = require('./config_global.js');
module.exports = {
entry: "./src/ui/module.js",
output: {
path: "./"+process.env.NAME,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react']
}
},
{
test: /.sass$/,
loader: 'style!css!sass?indentedSyntax'
},
{
test: /.css$/,
loader: "style!css"
},
{
test: /.(png|gif)$/,
loader: "url?mimetype=image/[ext]&limit=10000"
}
]
},
plugins: [
new LiveReloadPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
}),

build native mobile apps with
javascript!
using native blocks (java, obj-c)
compose blocks using JS
best solution for specific applications
React Native
render() {
const rows = this.state.news.map((row, ii)
=> {
return <Row key={ii} data={row.data}/>;
});
return (
<ScrollView
style={styles.scrollview}
refreshControl={
<RefreshControl
refreshing={this.props.isFetching}
onRefresh={this._onRefresh}
tintColor="#1b1b1b"
title="Loading..."
titleColor="#1b1b1b"
colors={['#ff0000', '#00ff00',
'#0000ff']}
progressBackgroundColor="#ffed00"
/>
}>
{rows}
</ScrollView>
);
}

Advanced topic
Hosting react apps - Google Storage Bucket
Redux sagas and middleware
React native routing - using native controllers

www.ackee.de
lovely people, lovely apps