Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Component Based WebDevelopment
Search
Fabian Gosebrink
January 17, 2017
Programming
0
62
Component Based WebDevelopment
KickOff Noser 2017
Fabian Gosebrink
January 17, 2017
Tweet
Share
More Decks by Fabian Gosebrink
See All by Fabian Gosebrink
My Biggest Angular Mistakes and How To Avoid Them
fabiangosebrink
0
86
[iJS Munich] Better Angular Architectures with Libraries and Nx
fabiangosebrink
0
95
Mastering State Management in Angular with the NgRx Signal Store
fabiangosebrink
0
220
Angular Architectures with NgRx Stores & Effects
fabiangosebrink
0
60
Angular Testing made easy with Jest and Cypress
fabiangosebrink
0
70
Introducing NgRx in an Nx Angular Workspace
fabiangosebrink
0
260
Full-Stack-Web-Applications with Angular, Nx and .NET
fabiangosebrink
0
160
Angular Signals - Revolution in Angular development
fabiangosebrink
0
190
Kickstarting Your Journey with NgRx Signal Store
fabiangosebrink
0
130
Other Decks in Programming
See All in Programming
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Honoとフロントエンドの 型安全性について
yodaka
4
250
『品質』という言葉が嫌いな理由
korimu
0
160
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Building Applications with DynamoDB
mza
93
6.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Building Your Own Lightsaber
phodgson
104
6.2k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Designing Experiences People Love
moore
139
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Transcript
Modern Web Development
@FabianGosebrink
Client Architecture
Angular
None
View Controller Service
Databinding
View Service Directive Directive Controller
View Service Directive Directive Directive Directive
None
View Service Component Component Component Component
None
there is no « AngularJS way »
Component Based Design
None
None
None
None
None
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" />
There is more…
None
None
None
None
Problem #1
None
REST-Service Component Component Component
None
None
None
Stateless Component
Stateful Component
None
List Component Stateful Component Form Component REST-Service
List Component Stateful Component Form Component REST-Service (…) […] (…)
[…]
One-Way Dataflow
Problem #2
Two-Way Binding
[(ngModel)]="foodname"
<input [ngModel]="foodname" (ngModelChange)="foodname = $event">
List Component Stateful Component Form Component REST-Service
List Component Stateful Component Form Component REST-Service
None
None
Demo
https://github.com/FabianGosebrink/ASPNET-ASPNET-Core-Angular1-Angular2-Demo
Systemarchitektur
None
Server Client
Server Client
Server Client HTTP
Component Based Design One-Way Dataflow Seperation Client/Server
Better. Together.
Le Fin