Modern web applications
Damian Dulisz
Monterail/pwr
Source lines of code/time spent in general*
* from my experience
The language got much better.
The platform improved and follows standards, meaning jQuery is no longer needed.
The ecosystem has grown so big, it can’t be ignored.
JavaScript succeeded where Java failed – it is now run on almost every possible platform.
Transpilers like Babel, translate ES6+ code into plain old ES5 so usually, you don’t have to worry about compatibility.
You can even use experimental proposals to the language, although that’s not recommended!
And there is TypeScript, a superset of JavaScript with static type checking and more.
arrow functions
destructuring
spread operator
rest parameter
promises
async/await
generators
block scoped variables
classes
decorators
and more...
type checking
interfaces
es6 modules
// arrow functions
const Sum = x => y => x + y
const Add5 = Sum(5)
Add5(10) // 15
// spread
const x = { a: 1, b: 2 }
const y = { b: 5, c: 8 }
const z = { ...x, ...y, d: 10 }
// { a: 1, b: 5, c: 8, d: 10 }
// promises
function getUsers () {
axios.get('/api/v1/users').then(response => { this.data = response })
}
// or async/await
async function getUsers () {
this.data = await axios.get('/api/v1/users')
}
// destructuring, rest
const validatorString = 'between:5:15'
const [validator, ...args] = valdiatorString.split(':')
console.log(validator) // 'between'
console.log(args) // [5, 15]
import { fetchUser as getUser } from './userService.js'
import * as MUTATIONS from './mutation-types.js'
import UserTable from '~components/UserTable.vue'
// userService.js
export function fetchUser () { ... }
// mutation-types.js
export const SET_USERS = 'SET_USERS'
export const DELETE_USER = 'DELETE_USER'
// UserTable.vue
export default { ... }
Browserify
Rollup.js
Shines for bundling libraries
Consist of just an index.html file and a bunch of JavaScript and CSS files.
Completely decoupled from backend
Server is no longer responsible for generating HTML files.
Thus HTML is no longer the source of data. JavaScript is.
JavaScript controls everything including the routing.
JavaScript can asynchronously fetch the data from different sources.
Used to create reusable blocks of functionality to use across the application.
Have no idea about the context they are used in. Reusable.
Configurable with props.
Examples:
Used to implement app specific features. Rather not reusable.
Examples:
Are usually divided into two groups based on what information they contain.
Since a HTML document is basically a tree composed of DOM nodes, it can be represented as an JavaScript object.
If it can be an object, it can be created with a function.
We can compare the virtualDOM objects to find out which DOM node needs to be created, updated or removed.
Once the data changes, we calculate the new virtualDOM object, diff it with the old one and patch the changes.
// Example virtualDOM object
const node = { type: '...', props: { ... }, children: [ ... ] }
// Common helper function
function h (type, props, children) {
return { type, props, children }
}
// example usage
const render = (
h('div', { class: 'my-form' }, [
h('label', {}, 'This is a label'),
h('input', { type: 'text' }),
h(‘button’, { type: ‘button’ }, 'Save!')
])
)
// or when using JSX
const render = (
<div className="my-form">
<label>This is a label</label>
<input type="text"/>
<button type="button">Save!</button>
</div>
)
// both will return
const render = {
type: 'div',
props: { class: 'my-form' },
children: [
{ type: 'label', props: {}, children: ['This is a label'] },
{ type: 'input', props: { type: 'text'}, children: [] },
{ type: 'button', props: { type: 'button' }, children: ['Save!'] }
]
}
Imagine DOM = f(state) where state is the data model. That’s how it works.
Imperative changes to the real DOM are considered an anti-pattern and will be ignored after the next update.
Angular
React
Vue
Ember
Just a library
Less opinionated
Very flexible
Full framework
Very opinionated
Not really flexible
Just a library
Less opinionated
Very flexible
Bonus slides
Apart from tooling, Node.js can also be used for server-side applications just like Ruby, Java or PHP.
But webpack is also mostly written in JavaScript that runs on Node.js, which is basically the V8 JavaScript engine from Chromium running in the background of your system.
You can even render front-end apps (Vue, React) on the server so that the user receives a meaningful first paint (HTML full of relevant data) before the SPA client takes over.
Great user experience and SEO support.
Such apps are often called isomorphic applications.
It lets you write multi-platform native-like apps that run inside a Chromium-based window with access to the filesystem and native OS API.
Works offline. Uses HTML, CSS and JS. Frameworks included.
Most of the code can be shared between the web app and the electron app.
Runs a Node.js process in the background, but can also make use of .NET (C#) code.
What if we could use it not only for creating HTML DOM nodes but nodes in general?
Does that ring a bell?
<view>
<text>
Hello World!
</text>
</view>
Thanks to the abstraction layer of the virtual DOM we’re not limited to just the web.
Runs on the internal JavaScript engine of Android and iOS (not a webview)
Can make use of native UI elements as well as the platform API
It means it’s like a regular web app, just progressively enhanced.
Offline mode (with background sync once back online)
Push notifications
Able to add to Home Screen (Android only)
Try it out, go to mobile.twitter.com
Questions?