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
33
Angular testing made easy with Jest and Cypress
fabiangosebrink
0
74
Introducing state management into an application with NgRx
fabiangosebrink
0
110
Scalable architectures in Angular with Nx
fabiangosebrink
0
97
My Biggest Angular Mistakes and How To Avoid Them
fabiangosebrink
0
200
[iJS Munich] Better Angular Architectures with Libraries and Nx
fabiangosebrink
0
130
Mastering State Management in Angular with the NgRx Signal Store
fabiangosebrink
0
310
Angular Architectures with NgRx Stores & Effects
fabiangosebrink
0
95
Angular Testing made easy with Jest and Cypress
fabiangosebrink
0
94
Other Decks in Programming
See All in Programming
Benchmark
sysong
0
270
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
390
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.7k
Java on Azure で LangGraph!
kohei3110
0
170
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
450
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
990
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
280
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
810
ふつうの技術スタックでアート作品を作ってみる
akira888
0
150
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Documentation Writing (for coders)
carmenintech
72
4.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
What's in a price? How to price your products and services
michaelherold
246
12k
Speed Design
sergeychernyshev
32
1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Balancing Empowerment & Direction
lara
1
380
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
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