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
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
『品質』という言葉が嫌いな理由
korimu
0
160
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
We Have a Design System, Now What?
morganepeng
51
7.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Writing Fast Ruby
sferik
628
61k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Statistics for Hackers
jakevdp
797
220k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Unsuck your backbone
ammeep
669
57k
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