Dlaczego backendowcy wolą Angulara

Podczas prezentacji omówimy problemy, które są charakterystyczne dla pracy w środowisku przeglądarki a następnie przekonamy się, jak Angular sprawia, że w praktyce - znikają. Przykłady kodu w TypeScript, z klasami, adnotacjami i wstrzykiwaniem zależności (i bez dotykania DOM-a!) sprawią, że każdy programista Java poczuje się dużo swobodniej niż w typowym JavaScriptowym projekcie.

Transcript

1. Dlaczego backendowcy 
 wolą Angulara Tomek Sułkowski
2. uhh… frontend, am I right?
3. irytującego trudnego Co jest tak we frontendzie? • CSS: globalny, trudny w skalowaniu • JavaScript: globalny, słabe typowanie, rozwlekła składnia, trudne dziedziczenie, problem z "this" (...) • js faCgue
4. Tomek Sułkowski FRONTEND DEV. IT TRAINER
5. ECMAScript 6 ECMAScript 2015
6. ES2015 - praca z tablicami var items = Array.prototype.slice.call(nodes) ES5 const itsArray = Array.from(nodes) ES6 const itsArray = [...nodes] ES6 var nodes = document.querySelectorAll('.item')
7. ES2015 - praca z obiektami var user = { id: id, name: name, greet: function greet(politely) {} } ES5 const user = { id, name, greet() {} ) ES6
8. ES2015 - praca z obiektami var id = user.id; var name = user.name; var greet = user.greet; ES5 const {id, name, greet} = user; ES6
9. ES2015 - arrow func?ons var users = data.map(function (item) { return item.id; }); ES5 const users = data.map(item => item.id); ES6 const users = data.map(({id}) => id); ES6
10. ES2015 - moduły ES6 // file: lib/math.js export function sum(x, y = 0) { return x + y; } export const pi = 3.141593; import {sum, pi} from "../lib/math"; alert("2π = " + sum(pi, pi)); ES6 import * as math from "../lib/math"; ES6
11. TypeScript
12. TS
13. TS class Client extends User implements Storable { id: number; private verified: boolean; constructor( name: string, public city: string, age?: number ) { super(); } }
14. TS
15. TS
17. Angular
18. if(this.types.length === 1) { var endView = '<ul class="nav nav-tabs nav-products-tabs"><li class="onlyoneli" } else { var endView = '<ul class="nav nav-tabs nav-products-tabs">'; var no = 1; for (i = 0; i < this.types.length; i++) { if(i > 0) { endView += '<li class="separator"><div></div></li>'; } if(i === 0) { endView += '<li class="li'+this.types[i]+idLi+' active">'; } else { endView += '<li class="li'+this.types[i]+idLi+'">'; } endView += '<a data-toggle="tab" href="#'+this.types[i]+idA+'" lang="pl"><sp endView += '</li>'; no++; } endView += '</ul>'; } imperaCve
19. <ul *ngFor="let type of types; index as i" class="nav nav-tabs <li [ngClass]="getClass(type)" *ngIf="type.active"> <a (click)="toggleTab(type)"> <span class="clcounter">{{ i }}</span> <type-description [type]="type"></type-description> </a> </li> </ul> declaraCve
20. @Component({ selector: 'my-component', template: `<div>Hello my name is {{name}}. <button (click)="greet()">Greet</button></div>` }) export class MyComponent { constructor() { this.name = 'Max' } greet() { console.log('My name is', this.name) } } Angular component
21. Angular service @Injectable() class UserService { constructor() {} } ... in use class ProfileComponent { constructor(user: UserService) {}
22. Ok… ale dlaczego Angular?
23. • Jak robić rouCng? • Jak pracować z formularzami? • Jaki i gdzie pisać CSS?
 (bem, inline styles, css modules, styled components, jss, ...) • Gdzie trzymać dane?
 (flux, redux, reflux, ... , mobx) • Jak pracować z kodem w trybie dev? • A jak przygotować go na produkcję? opinie,
 opinie,
 opinie, …
25. [...]
26. demo Cme!
27. od czego zacząć?
29. Dzięki!