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
Seven Year Itch
Search
Andrew Best
March 17, 2015
Programming
0
320
Seven Year Itch
A brief tale of porting an Angular 1.x app to ReactJS, and a comparison of the two frameworks.
Andrew Best
March 17, 2015
Tweet
Share
More Decks by Andrew Best
See All by Andrew Best
The Surprising Truths Behind Good Mentoring
andrewabest
0
59
Learn Authentication The Hard Way
andrewabest
0
320
Finding The Sweet Spot BNE
andrewabest
1
220
Finding The Sweet Spot
andrewabest
0
430
Automating AWS
andrewabest
2
360
Conventional Wisdom
andrewabest
1
430
DSC a-b-c's
andrewabest
0
130
AWS a-b-c's
andrewabest
3
150
What is Git?
andrewabest
0
210
Other Decks in Programming
See All in Programming
リッチエディターを安全に開発・運用するために
unachang113
1
240
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
250
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
200
MCPで実現できる、Webサービス利用体験について
syumai
7
1.9k
Gemini CLI のはじめ方
ttnyt8701
1
100
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
180
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
270
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
2
380
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Producing Creativity
orderedlist
PRO
346
40k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Docker and Python
trallard
45
3.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Transcript
The seven year itch
Page A short Angular narrative › Mr White: I’m trying
to set a variable on my scope and it isn’t reflecting in the UI. › Mr Blue: I ususaly just use “if (!$scope.$$phase) $scope.$apply() “. › Mr Red: Don’t do that! You should use “$timeout()”, because “if (!$scope.$$phase) $scope.$apply() “ is an anti-pattern. › Me: THAT IS ALL AWFUL. / Copyright ©2014 by Readify Pty Ltd 2
Page Inspiration › Given angular v1 is effectively obsolete* ›
And given my recent pause for thought › And given there is a lot of noise around React as a front-end framework › When selecting a front-end framework for a new web project › Then [Insert conclusion here] * http://www.techinfine.com/post/231575/Announcements-from-ng-confsome interesting news at ng-confjust last week has injected some hope into Angular V1, although at the moment it is just that –hope. / Copyright ©2014 by Readify Pty Ltd 3
Page Empirical observation › Ease-of-componentization › Amount of magic (less
is better) › Grokkabilityof concepts › Availability of solutions to common problems › Speed of development › Extensibility › Amount of swearing induced during usage / Copyright ©2014 by Readify Pty Ltd 4
Page The angular app / Copyright ©2014 by Readify Pty
Ltd 5
Page Angular architecture › ‘no controller’ style componentization http://teropa.info/blog/2014/10/24/how-ive- improved-my-angular-apps-by-banning-ng-
controller.html › Factories for services › Authentication enforced by router › Basic NancyFX backend / Copyright ©2014 by Readify Pty Ltd 6
Page The react rebuild / Copyright ©2014 by Readify Pty
Ltd 7
Page Hello React › React.js and JSXTransformer.js › “script/jsx” ›
React.creatClass() › React.run() / Copyright ©2014 by Readify Pty Ltd 8
Page React-router › https://github.com/rackt/react-router › Uses components as route handlers
› Inspired by the Ember router / Copyright ©2014 by Readify Pty Ltd 9
Page UI Complete › Component construction and composition is super
easy › PropTypes enforce components expectations on props it requires › Component specifications › Component lifecycle methods / Copyright ©2014 by Readify Pty Ltd 10
Page Authentication › Like the angular apps implementation of this
cross cutting concern, leverage routing to enforce auth. › Use a mixin to inspect and redirect for auth. / Copyright ©2014 by Readify Pty Ltd 11
Page State Management › “State should be avoided” › State
is unavoidable › FLUX › Manage state in a way that gels with React / Copyright ©2014 by Readify Pty Ltd 12
Page W-T-Flux? › Created by Facebook with the intent of
making updating data in an application more explicit and traceable › Fluxxor › https://reactjsnews.com/the-state-of-flux/ / Copyright ©2014 by Readify Pty Ltd 13
Page Flux and async › Handling asynchronous interactions with the
server is easy enough with Fluxxor, but isn’t strictly in-built. › Need to dispatch actions on start, done and fail of interaction, and stores are used to supply state that the view can use to inform the user that things are happening. / Copyright ©2014 by Readify Pty Ltd 14
Page The weigh-in › Ease-of-componentization React › Amount of magic
(less is better) React › Grokkabilityof concepts React › Availability of solutions to common problems Angular › Speed of development Angular › Extensibility Angular › Amount of swearing induced during usage React / Copyright ©2014 by Readify Pty Ltd 15
Page Acknowledgements • Please Wait (https://github.com/Pathgather/plea se-wait) • Sweet Alert
(https://github.com/t4t5/sweetalert) • Bootswatch (https://bootswatch.com/darkly/) / Copyright ©2014 by Readify Pty Ltd 16
Thankyou! github.com/andrewabest @_AndrewB