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
Why State is the Most Important Part of Your Angular Application
fabiangosebrink
0
61
Angular testing made easy with Jest and Cypress
fabiangosebrink
0
94
Introducing state management into an application with NgRx
fabiangosebrink
0
140
Scalable architectures in Angular with Nx
fabiangosebrink
0
120
My Biggest Angular Mistakes and How To Avoid Them
fabiangosebrink
0
230
[iJS Munich] Better Angular Architectures with Libraries and Nx
fabiangosebrink
0
140
Mastering State Management in Angular with the NgRx Signal Store
fabiangosebrink
0
350
Angular Architectures with NgRx Stores & Effects
fabiangosebrink
0
110
Angular Testing made easy with Jest and Cypress
fabiangosebrink
0
110
Other Decks in Programming
See All in Programming
Rancher と Terraform
fufuhu
2
550
チームのテスト力を鍛える
goyoki
3
470
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
1.9k
為你自己學 Python - 冷知識篇
eddie
1
350
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
120
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
Improving my own Ruby thereafter
sisshiki1969
1
160
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
testingを眺める
matumoto
1
140
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Context Engineering - Making Every Token Count
addyosmani
3
51
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Documentation Writing (for coders)
carmenintech
74
5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Become a Pro
speakerdeck
PRO
29
5.5k
Building Applications with DynamoDB
mza
96
6.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Producing Creativity
orderedlist
PRO
347
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Cult of Friendly URLs
andyhume
79
6.6k
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