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
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
RDoc meets YARD
okuramasafumi
4
170
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
はじめてのMaterial3 Expressive
ym223
2
900
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
160
私の後悔をAWS DMSで解決した話
hiramax
4
210
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
630
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
Kiroで始めるAI-DLC
kaonash
2
620
OSS開発者という働き方
andpad
5
1.7k
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
279
23k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Code Reviewing Like a Champion
maltzj
525
40k
Visualization
eitanlees
148
16k
Statistics for Hackers
jakevdp
799
220k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Building an army of robots
kneath
306
46k
Six Lessons from altMBA
skipperchong
28
4k
Music & Morning Musume
bryan
46
6.8k
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