FFS The Browser and Everything In It Is Wrong - We've Ruined Software Engineering for Generations to Come

training@instil.co
FFSTechConf - September 2018
© Instil Software 2018
“FFS The browser and everything in it is
wrong. We've ruined software engineering
for generations to come”

Where Things Were Better…
Did you know that the original
4GL’s were designed to be an
ideal coding environment for
GUI’s? Where no one would
suffer, and everyone could
leave the office at 5pm?

Imagine a Developer Was Frozen in the 1990’s

What Would They Think About Today?

What Would They Think About Today?
“Somebody put me back in the fridge…”

What Do Todays Developers Think About The UI?

How much does a junior
developer need to know to
write a basic Web App?
Is it Really that Bad?

A Quotations Editor in Angular 2

All we need to do is:
•  Learn a new programming language (TypeScript)
•  Learn two new module systems (ES6 and NG Modules)
•  …and a packaging platform (Node.js, NPM and Webpack)
•  Learn about reactive streams (for every form of I/O)
Then we can write an Angular component
•  Once we understand how to manage Dependency Injection
•  …and the syntax for writing components and services
•  …and the syntax for data binding in template files
Of course eventually we will need to:
•  Decide what kind of forms we want (regular or reactive)
•  Use an external state container like Ngrx Store or Redux
A Quotations Editor in Angular 2

A Quotations Editor in Angular

[
{
"text": "Fortune favors the prepared mind",
"source": "Louis Pasteur"
},
{
"text": "We are what we repeatedly do. Excellence, then, is not
an act, but a habit.",
"source": "Aristotle"
},
{
"text": "Tether even a cooked chicken",
"source": "Hagakure"
},
{
"text": "Whereof one cannot speak, thereof one must be silent",
"source": "Ludwig Wittgenstein"
}
]
quotes.json
A Quotations Editor

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MemorableQuotes</title>
<base href="/">

<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<h1>Some Words To Live By (feel free to add your own)</h1>
<app-quotes-editor>Angular not running yet...</app-quotes-editor>
</body>
</html>
index.html
A Quotations Editor

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule} from '@angular/forms';
// ...

@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpClientModule
],
declarations: [
QuotesEditorComponent,
QuotesRowComponent
],
bootstrap: [
QuotesEditorComponent
]
})
export class AppModule {}
app.module.ts
A Quotations Editor

export interface Quote {
text: string;
source: string;
}
quotes.ts
A Quotations Editor

import {Component, OnInit} from '@angular/core';
import {Quote} from '../../model/quote';
import {HttpClient} from '@angular/common/http';

@Component({
selector: 'app-quotes-editor',
templateUrl: './quotes-editor.component.html',
styleUrls: ['./quotes-editor.component.css']
})
export class QuotesEditorComponent {

quotes-editor.component.ts
A Quotations Editor

quotations: Quote[];
newText: string;
newSource: string;

constructor(private http: HttpClient) {
this.newText = 'Get to the chappa!';
this.newSource = 'Colonel Matrix';

this.http.get<Quote[]>('assets/data/quotes.json')
.subscribe(quotes => this.quotations = quotes);
}

addQuotation() {
this.quotations.push({
text: this.newText,
source: this.newSource
});
}
}
quotes-editor.component.ts
A Quotations Editor

<h1>Quotes App</h1>
<table>
<thead>
<tr>
<th>Author</th>
<th>Quote</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let quote of quotations" app-quotes-row
[text]="quote.text" [source]="quote.source"></tr>
</tbody>
</table>

<hr/>

quotes-editor.component.html
A Quotations Editor

<form name="quotesForm">
<div>
<label>Quote text:</label>
<input type="text" size="60" name="newText"
[(ngModel)]="newText"/>
</div>
<div>
<label>Quote origin:</label>
<input type="text" size="20" name="newSource"
[(ngModel)]="newSource"/>
</div>
<div>
<input value="Add Quotation" type="button"
(click)="addQuotation()"/>
</div>
</form>
quotes-editor.component.html
A Quotations Editor

import { Component, Input } from '@angular/core';

@Component({
selector: ‘[app-quotes-row]',
template: '<td>{{source}}</td><td>{{text}}</td>',
styleUrls: [./quotes-row.component.css']
})
export class QuotesRowComponent {
@Input() source: string;
@Input() text: string;

constructor() {
this.source = "default source text";
this.text = "default quote text";
}
}
quotes.row.component.ts
A Quotations Editor

table {
border-collapse: collapse;
}

table, th {
border: 1px solid black;
}

tbody > tr:nth-child(2n) {
background-color: cyan;
}
quotes-editor.component.css
A Quotations Editor

td {
border: 1px solid black;
padding-left: 1em;
padding-right: 1em;
}

quotes-row.component.css
A Quotations Editor

JavaScript
TypeScript
Node.js / NPM
Angular 2
RxJS
REST
JSON
CSS
HTML
How Many Technologies?
…and that’s just the client side

Lets Not Mention The Server Side…

fun RBuilder.movieTable(handler: RHandler<MovieTableProps>) =
child(MovieTable::class, handler)!
!
class MovieTable(props: MovieTableProps) !
: RComponent<MovieTableProps, MovieTableState>(props) {!
init {
state.movies = props.movies!
}
override fun componentWillReceiveProps(nextProps: MovieTableProps) {!
state.movies = nextProps.movies!
}
private fun sortMovies(selector: (Movie) -> String) {!
val sortedMovies = state.movies.sortedBy(selector)!
setState { movies = sortedMovies }!
}!
private fun sortByTitle(e: Event) = sortMovies { it.title }!
private fun sortByGenre(e: Event) = sortMovies { it.genre }!
MovieTable.kt
What Lies In Our Future?

override fun RBuilder.render() {!
table(classes = "table table-striped table-bordered") {!
thead {
tr {
th {
+"Title"
span(classes="fas fa-sort ml-2") {}
attrs { onClickFunction = ::sortByTitle }
}
th {
+"Genre"
span(classes="fas fa-sort ml-2") {}
attrs { onClickFunction = ::sortByGenre }
}
th { +"Tagline" }
}
}
MovieTable.kt

tbody {
state.movies.map { movie ->
tr {
td { +movie.title }
td { +movie.genre }
td { +movie.tagline }
attrs {
onClickFunction = {
props.selectedHandler(movie)
}
}
}
}
}
}
}
}

MovieTable.kt

FFS The Browser and Everything In It Is Wrong - We've Ruined Software Engineering for Generations to Come

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to FFS The Browser and Everything In It Is Wrong - We've Ruined Software Engineering for Generations to Come

Similar to FFS The Browser and Everything In It Is Wrong - We've Ruined Software Engineering for Generations to Come (20)

More from Garth Gilmour

More from Garth Gilmour (20)

Recently uploaded

Recently uploaded (20)

FFS The Browser and Everything In It Is Wrong - We've Ruined Software Engineering for Generations to Come