Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Component Based WebDevelopment

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

Component Based WebDevelopment

KickOff Noser 2017

Avatar for Fabian Gosebrink

Fabian Gosebrink

January 17, 2017

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
45
Scalable Angular Architectures with Route-Based Architecture
Avatar for Fabian Gosebrink fabiangosebrink
0
36
Advanced Signal Store: Structuring State for Real Angular Applications
Avatar for Fabian Gosebrink fabiangosebrink
0
130
NgRx Signal Store - A Deeper Dive
Avatar for Fabian Gosebrink fabiangosebrink
0
85
Modern Angular Apps in 2026
Avatar for Fabian Gosebrink fabiangosebrink
0
150
Why State is the Most Important Part of Your Angular Application
Avatar for Fabian Gosebrink fabiangosebrink
0
170
Angular testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
190
Introducing state management into an application with NgRx
Avatar for Fabian Gosebrink fabiangosebrink
0
280
Scalable architectures in Angular with Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
280

Other Decks in Programming

See All in Programming
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
Avatar for Seiji Takahashi timakin
4
3.5k
KiroのSpecで「五目並べ」を作ってみる
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
380
IBM Bob Dojo #1 仕様駆動開発入門
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
390
UPDATE をやめる — EF Core でマスタをバージョン管理する
Avatar for HideyukiKitao panda728
PRO
0
1.2k
作れる、でも消せるか？──安全に「枯らして消す」機能削除術 / Drain, Then Delete
Avatar for chobishiba chobishiba
2
630
AWSに止められる覚悟してますか？
Avatar for モリゾー morizo_1984
2
530
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
Avatar for shiro seike seike460
PRO
1
1.1k
[2026-09-26]空論ジェネリックプロセス～テスト資産とAIで紡ぐ、再現可能なパフォーマンスチューニングの話～
Avatar for tosite tosite
0
270
設計次第でAIコードの読む量は減らせる / designing-for-code-reading
Avatar for MinoDriven minodriven
35
17k
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
180
ActionController meets Protocol Buffers
Avatar for Sorah Fukumori sorah
0
520
ジョジョの世界をXRで再現する
Avatar for mofurune mofurune
0
160

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
600
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
2
720
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
630
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
10
37k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
400

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