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

Component Based WebDevelopment

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Fabian Gosebrink Fabian Gosebrink
January 17, 2017
Programming
0
64

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
Modern Angular Apps in 2026
Avatar for Fabian Gosebrink fabiangosebrink
0
19
Why State is the Most Important Part of Your Angular Application
Avatar for Fabian Gosebrink fabiangosebrink
0
82
Angular testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
130
Introducing state management into an application with NgRx
Avatar for Fabian Gosebrink fabiangosebrink
0
200
Scalable architectures in Angular with Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
160
My Biggest Angular Mistakes and How To Avoid Them
Avatar for Fabian Gosebrink fabiangosebrink
0
260
[iJS Munich] Better Angular Architectures with Libraries and Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
160
Mastering State Management in Angular with the NgRx Signal Store
Avatar for Fabian Gosebrink fabiangosebrink
0
410
Angular Architectures with NgRx Stores & Effects
Avatar for Fabian Gosebrink fabiangosebrink
0
120

Other Decks in Programming

See All in Programming
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
Avatar for Date Huang tjjh89017
0
150
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
450
Oxlintはいいぞ
Avatar for Yuji Yamaguchi yug1224
5
1.3k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
510
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
210
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
640
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
0
930
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
770
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
200
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
5
330

Featured

See All Featured
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.6k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
280
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
770
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
210
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
1
49

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