Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Component Based WebDevelopment

Avatar for Fabian Gosebrink Fabian Gosebrink
January 17, 2017
Programming
0
62

Component Based WebDevelopment

KickOff Noser 2017
Avatar for Fabian Gosebrink

Fabian Gosebrink

January 17, 2017
Tweet

More Decks by Fabian Gosebrink

See All by Fabian Gosebrink
Why State is the Most Important Part of Your Angular Application
Avatar for Fabian Gosebrink fabiangosebrink
0
33
Angular testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
74
Introducing state management into an application with NgRx
Avatar for Fabian Gosebrink fabiangosebrink
0
110
Scalable architectures in Angular with Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
97
My Biggest Angular Mistakes and How To Avoid Them
Avatar for Fabian Gosebrink fabiangosebrink
0
200
[iJS Munich] Better Angular Architectures with Libraries and Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
130
Mastering State Management in Angular with the NgRx Signal Store
Avatar for Fabian Gosebrink fabiangosebrink
0
310
Angular Architectures with NgRx Stores & Effects
Avatar for Fabian Gosebrink fabiangosebrink
0
95
Angular Testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
94

Other Decks in Programming

See All in Programming
Benchmark
Avatar for 송상윤 sysong
0
270
Julia という言語について （FP in Julia « SIDE: F »） for 関数型まつり2025
Avatar for GOTOH Shunsuke antimon2
3
980
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
Avatar for Hiromi Hishida 77web
2
390
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
Avatar for Tetsuya Kikuchi tkikuc
20
3.7k
Java on Azure で LangGraph！
Avatar for Kohei Saito kohei3110
0
170
Bytecode Manipulation 으로 생산성 높이기
Avatar for Daekyu bigstark
2
380
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
Avatar for Akira Kobori koboriakira
0
450
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
Avatar for Hayato OKUMOTO falcon8823
4
990
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
Avatar for lni_T lnit
2
280
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
Avatar for uki00a uki00a
0
150
Go1.25からのGOMAXPROCS
Avatar for kuro kuro_kurorrr
1
810
ふつうの技術スタックでアート作品を作ってみる
Avatar for Akira Yagi akira888
0
150

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
330
24k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
138
34k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.5k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
234
140k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
380
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
20
1.3k

Transcript

  1. Modern Web Development

  2. @FabianGosebrink

  3. Client Architecture

  4. Angular

  5. None

  6. View Controller Service

  7. Databinding

  8. View Service Directive Directive Controller

  9. View Service Directive Directive Directive Directive

  10. None

  11. View Service Component Component Component Component

  12. None

  13. there is no « AngularJS way »

  14. Component Based Design

  15. None
  16. None
  17. None
  18. None
  19. None

  20. 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" />

  21. There is more…

  22. None
  23. None
  24. None
  25. None

  26. Problem #1

  27. None

  28. REST-Service Component Component Component

  29. None
  30. None
  31. None

  32. Stateless Component

  33. Stateful Component

  34. None

  35. List Component Stateful Component Form Component REST-Service

  36. List Component Stateful Component Form Component REST-Service (…) […] (…)

    […]

  37. One-Way Dataflow

  38. Problem #2

  39. Two-Way Binding

  40. [(ngModel)]="foodname"

  41. <input [ngModel]="foodname" (ngModelChange)="foodname = $event">

  42. List Component Stateful Component Form Component REST-Service

  43. List Component Stateful Component Form Component REST-Service

  44. None
  45. None

  46. Demo

  47. https://github.com/FabianGosebrink/ASPNET-ASPNET-Core-Angular1-Angular2-Demo

  48. Systemarchitektur

  49. None

  50. Server Client

  51. Server Client

  52. Server Client HTTP

  53. Component Based Design One-Way Dataflow Seperation Client/Server

  54. Better. Together.

  55. Le Fin