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
260
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
Learn Authentication The Hard Way
andrewabest
0
250
Finding The Sweet Spot BNE
andrewabest
1
210
Finding The Sweet Spot
andrewabest
0
370
Automating AWS
andrewabest
2
300
Conventional Wisdom
andrewabest
1
360
DSC a-b-c's
andrewabest
0
120
AWS a-b-c's
andrewabest
3
140
What is Git?
andrewabest
0
210
Client Side Testing
andrewabest
0
54
Other Decks in Programming
See All in Programming
Namespace on read
tagomoris
2
370
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
Trial
cairolibrary720
1
130
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
【Go言語】ジェネリクス
tomo1227
0
170
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
Featured
See All Featured
What the flash - Photography Introduction
edds
65
11k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Ruby is Unlike a Banana
tanoku
96
10k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Producing Creativity
orderedlist
PRO
340
39k
Web Components: a chance to create the future
zenorocha
307
41k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
BBQ
matthewcrist
82
9k
Building an army of robots
kneath
301
42k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
The Cult of Friendly URLs
andyhume
75
5.9k
Designing Experiences People Love
moore
136
23k
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