Component Based WebDevelopment

KickOff Noser 2017

Transcript

1. Modern Web Development
2. @FabianGosebrink
3. Client Architecture
4. Angular
6. View Controller Service
7. Databinding
8. View Service Directive Directive Controller
9. View Service Directive Directive Directive Directive
11. View Service Component Component Component Component
13. there is no « AngularJS way »
14. Component Based Design
20. class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for {this.props.name}</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } } // Example usage: <ShoppingList name="Mark" />
21. There is more…
26. Problem #1
28. REST-Service Component Component Component
32. Stateless Component
33. Stateful Component
35. List Component Stateful Component Form Component REST-Service
36. List Component Stateful Component Form Component REST-Service (…) […] (…) […]
37. One-Way Dataflow
38. Problem #2
39. Two-Way Binding
40. [(ngModel)]="foodname"
41. <input [ngModel]="foodname" (ngModelChange)="foodname = $event">
42. List Component Stateful Component Form Component REST-Service
43. List Component Stateful Component Form Component REST-Service
46. Demo
47. https://github.com/FabianGosebrink/ASPNET-ASPNET-Core-Angular1-Angular2-Demo
48. Systemarchitektur
50. Server Client
51. Server Client
52. Server Client HTTP
53. Component Based Design One-Way Dataflow Seperation Client/Server
54. Better. Together.
55. Le Fin