Lecture 10
Hana Navrátilová
https://i.warosu.org/data/g/img/0625/33/1506048572584.jpg
medium.com (Jul 30, 2018): We analyzed the number of open positions worldwide that require
a specific knowledge of a certain framework. As a source, we took Indeed.com and got the
following distribution according to more than 60,000 job offers.
Virtual DOM
• What is the Virtual DOM?
• How it helps?
• Is an abstraction of the HTML
DOM (Document Object Model)
• Manipulating the virtual DOM
is much faster than DOM
(nothing gets drawn onscreen)
• Only objects wich have
changed are updated on the
real DOM
VUE.JS
• 2013
• Evan You
• JavaScript Framework
• JS or TS
• Render to VirtualDOM
• 2-way binding
• Vuex
Component structure
VUE.JS
component.vue
<template>
… HTML …
</template>
<script lang="ts">
… TS(X) …
</script>
<style>
… CSS …
</style >
component.vue
<template>
… HTML …
</template>
<script>
… JS(X) …
</script>
<style>
… CSS …
</style >
<script src="myscript.j(t)s"/>
Components
1. export default { name: ‘’, … }
2. @Component({ … })
export default class name extends Vue { … }
3. export default Component({ … })(
class name extends Vue { … }
)
4. Vue.component('name', {
template: ''
})
VUE.JS
Data object = Reacts state
VUE.JS
<script>
export default {
…,
data: function () {
return {
text: 'hi'
}
},
…
}
</script>
<script>
let inputValue = 'text'
export default {
…,
data: function () {
return {
inputValue
}
},
…
}
</script>
<script>
let inputValue = 'text'
</script>
1. 2., 3.
Rendering
VUE.JS
One way binding (from data source to view target):
<span> {{text}} </span>
One way binding (from view target to data source):
<button v-on:click="add"> Add </button>
Two way binding:
<input type="text" v-model="inputValue"/>
Filters:
<span> {{text | formatText}} </span>
Rendering - filters
VUE.JS
<span> {{text | formatText}} </span>
<script>
export default {
…,
filters: {
formatText: function (value) {
return …
}
},
…
}
</script>
1.
Rendering - filters
VUE.JS
<span> {{text | formatText}} </span>
function formatText (value) {
return …
}
@Component({
filters: {formatText}
})
export default class name extends Vue {}
2.
Rendering - filters
VUE.JS
<span> {{text | formatText}} </span>
function formatText (value) {
return …
}
export default Component({
filters: {formatText}
})( class name extends Vue {})
3.
VUE.JS
Conditionals
<template>
<span v-if="seen">Now you see me</span>
<h1 v-else>You don‘t see the first text.</h1>
</template>
export default {
data: {
seen: true
}
}
VUE.JS
Loops
<template>
<li v-for="(item, index) in items">
<span{{index}}. {{item.text}}</span>
</li>
</template>
<script>
export default {
data: function () {
return {
items: [{
text: 'item1'
},{
text: 'item2'
}]
}}}
</script>
VUE.JS
Component registration
import item from './item
export default Component ({
components: { item }
})
import item from './item
@Component({
components: { item }
})
import item from './item
export default {
components: [
item
], ... }
<template>
<item />
</template>
1.
2.
3.
Props
VUE.JS
export default {
name: item',
props: [
'index',
'item'
],
…
}
<template>
<item :index="index + 1" :item="item"/>
</template>
1.
Props
VUE.JS
@Component({props: [
'item',
'index'
]})
export default class item extends Vue { … }
<template>
<item :index="index + 1" :item="item"/>
</template>
2.
Props
VUE.JS
<template>
<item :index="index + 1" :item="item"/>
</template>
export default Component({props: [
'item',
'index'
]})(
class activeItem extends Vue { … }
3.
VUE.JS
Callbacks
listItem.vue
<template>
<button v-on:click="saveItem">
Save item
</button>
</template>
<script>
export default {
name: 'listItem', … ,
methods: {
saveItem : function () {
this.$emit('onSaveItem',
this.item.id, text)
}}}
</script>
list.vue
<template>
<listItem @onSaveItem="editItem" />
</template>
<script>
import Vue from 'vue'
import { Component } from 'vue-property-
decorator'
import listItem from './listItem'
@Component({
components: { listItem }
})
export default class list extends Vue {
editItem (id, text){
…
}
</script>
Vue task
VUE.JS
1. PhoneBook component
2. Person component
3. Format number pipe
4. Delete person emit
[phoneNumber.slice(0, 3), ' ', phoneNumber.slice(3)].join('')
ANGULAR
• 2010
• Google
• New version of AngularJS
• (JavaScript) Framework
• TS
• Render to DOM
• 2-way binding
• NgRX store
https://me.me/i/youre-a-fairy-here-to-grant-and-im-you-a-18387195
Component structure
ANGULAR
text.component.html
<div>
<span>My component!</span>
</div>
text.component.ts
import { Component } from '@angular/core';
@Component({
selector: ‚ app-text ',
templateUrl: './text.component.html',
styleUrls: ['./text.component.css']
})
export class TextComponent{
}
text.component.css
span {
}
Data = Reacts state
ANGULAR
import …
@Component({ … })
export class Component{
inputValue: = 'text';
items: ListItem[] = getDefaultList();
}
Rendering
ANGULAR
One way binding (from data source to view target):
<span> {{text}} </span>
One way binding (from view target to data source):
<button (click)="delete()">Delete </button>
Two way binding:
<input type="text" [(ngModel)]="inputValue"/>
Pipe operators:
<h2>{{name | uppercase}}</h2>
Rendering - pipes
ANGULAR
<h2>{{text | myPipe}}</h2>
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name:'myPipe'
})
export class MyPipe implements PipeTransform {
transform(value: any, ...args: any[]): any {
return …;
}
}
@NgModule({
declarations: [
MyPipe
]
})
export class Module { }
Conditionals
ANGULAR
<div *ngIf=„condition; then thenBlock else elseBlock "> </div>
<ng-template #thenBlock> Yes </ng-template>
<ng-template #elseBlock> No </ng-template>
<div *ngIf=„condition; else elseBlock ">Yes</div>
<ng-template #elseBlock> No </ng-template>
Loops
ANGULAR
<ul>
<li *ngFor="let item of items; let i = index">
<span> {{item.text}} </span>
</li>
</ul>
Component registration
ANGULAR
list.module.ts
import …;
@NgModule({
imports: [
CommonModule,
FormsModule
],
exports:[
ListComponent
],
declarations: [
ListComponent,
AddItemComponent,
MyPipe,
]
})
export class ListModule { };
main.ts
platformBrowserDynamic()
.bootstrapModule(AppModule);
app.module.ts
import …;
@NgModule({
declarations: [
AppComponent, …
],
imports: [
…,
ListModule
],
bootstrap: [AppComponent]
})
export class AppModule { };
Props
ANGULAR
<app-inactive-item [index]="i" [item]="item" />
import …;
@Component({…})
export class InactiveItemComponent {
@Input() index: number;
@Input() item: ListItem;
…
}
Callbacks
ANGULAR
list.component.ts
import …;
@Component({…})
export class ListComponent {
editItem(id: Uuid, text: string) {
…
}
}
activeItem.component.ts
import …;
@Component({…})
export class ActiveItemComponent {
@Output() onSaveItem: EventEmitter<string>
= new EventEmitter<string>();
saveItem = () =>
this.onSaveItem.emit(this.inputValue);
}
activeItem.component.html
<button(click)="saveItem()"> Save </button>
list.component.html
<app-active-item (onSaveItem)="editItem(item.id, $event)"/>
Services
ANGULAR
@Injectable({
providedIn: 'root',
})
export class Service {
method(): string{
return …;
}
}
export class Component {
text: string;
constructor(private service: Service) {
this.text = this.service.method();
}
}
Angular task
ANGULAR
1. CitiesList component
2. City component
3. Degrees pipe
4. City module
ngModelChange
Pete Hunt, one of the early contributors to React, says:
„You’ll know when you need Flux. If you aren’t sure if you need it, you don’t need it.“
https://medium.com/stratajet-tech/a-beginners-guide-to-ngrx-store-bc2184d6d7f0
Multiple stores YES NO* NO NO*
State is mutable YES NO YES NO
Dispatching process
Actions are written in
the store itself
Sparate actions and
reducers and store
Actions are written in
the store itself
Same as Redux
*There can be multiple stores, but they don‘t know about each other.
https://edgecoders.com/the-difference-between-flux-and-redux-71d31b118c1
https://vuex.vuejs.org/
Summary
Rendering time
https://medium.com/fundbox-engineering/react-vs-vue-vs-angular-163f1ae7be56
https://www.stefankrause.net/wp/?p=454
https://www.stefankrause.net/js-frameworks-benchmark7/table.html
November 20, 2017
What should I choose?
• If you work at Google: Angular
• If you love TypeScript: Angular (or React)
• If you love object-orientated-programming
(OOP): Angular
• If you work at Facebook: React
• If you like flexibility: React
• If you love big ecosystems: React
• If you like choosing among dozens of
packages: React
• If you love JS & the “everything-is-Javascriptapproach”:
React
• If you like really clean code: Vue
• If you want the easiest learning curve: Vue
• If you want the most lightweight framework: Vue
• If you want separation of concerns in one file: Vue
• If you are working alone or have a small
team: Vue (or React)
• If your app tends to get really large: Angular (or
React)
• If you want to build an app with reactnative:
React
• If you want to have a lot of developers in the
pool: Angular or React
• If you work with designers and need clean HTML
files: Angular or Vue
• If you like Vue but are afraid of the limited
ecosystem: React
• If you can’t decide, first learn React, then Vue,
then Angular.
https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176
• https://vuejs.org/
• https://angular.io/
• https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176
• https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d
• https://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/
• https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-
differences-e9a1ae8077fd
• https://egghead.io/lessons/vue-js-simplify-vue-components-with-vue-class-component
• https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy
• https://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-
difference-when-to-use-each-and-why/
• https://angular.io/api/core/NgModule
• https://github.com/voronianski/flux-comparison
• https://github.com/ngrx/store
• https://vuex.vuejs.org/
• https://angular.io/guide/rx-library
• https://edgecoders.com/the-difference-between-flux-and-redux-71d31b118c1
• https://medium.com/@Musclenun/redux-vs-vuex-9b682529c36
• https://blog.angular-university.io/angular-2-redux-ngrx-rxjs/