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
How to build an online IDE with React
Search
hui.liu
July 12, 2015
Programming
0
490
How to build an online IDE with React
A talk given at ShenJS 2015
hui.liu
July 12, 2015
Tweet
Share
More Decks by hui.liu
See All by hui.liu
Redux and React Server Rendering
hulufei
1
100
利用Grunt打造前端工作流
hulufei
5
1.1k
Other Decks in Programming
See All in Programming
AppRouter Panel Talk
yosuke_furukawa
PRO
1
520
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
2
480
Docker_OSS_ホスティング入門
satokoki645
0
140
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
410
Using "modern" Ruby to build a better, faster Homebrew
mikemcquaid
2
270
The Design of Everyday APIs - PyCon 2024
roguelynn
0
190
mb_trim関数を作りました
youkidearitai
PRO
1
220
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.9k
slow types ってなんだろう?
karad
0
210
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
300
TypeScriptのパフォーマンス改善
yajihum
14
5.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
In The Pink: A Labor of Love
frogandcode
138
21k
Web Components: a chance to create the future
zenorocha
306
41k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Building Adaptive Systems
keathley
32
1.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
67
14k
A Tale of Four Properties
chriscoyier
153
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Clear Off the Table
cherdarchuk
86
310k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Transcript
React 应⽤用实践 Coding · WebIDE
刘辉 (@hulufei)
None
React Flux Karma
Components
<Terminal /> <Editor /> <Tree /> <StatusBar /> <Menu />
<EnvSettings /> <Tab />
<WebIDE /> var App = React.createClass({ render: function() { return
( <div> <Menu /> <Tree /> ... </div> ) } }) JSX var Menu = React.createClass(...) var Tree = React.createClass(...) // ...
React + Flux
Flux Store Action View emitChange call Dispatcher
None
<SettingModal />
<Editor />
Editor Settings SettingStore <SettingModal /> <Editor /> SettingActions save emitChange
Addons Core (Flux) Addons Actions Bridge window.cide = require: (action)
-> require '../actions/' + action
Async Requests • Reads • Writes
Reads Store Components Promise Server get API Layer Store.getData() request.get(url)
.catch(errorAction)
Writes Action Components Server post/put API Layer Action.update() request.post(url).catch(errorAction)
Writing Testable JavaScript is hard, once
Writing Testable JavaScript Loose Coupling
Testing Flux Application • Testing Stores • Testing Components
Tools • Karma as test runner • Mocha as test
framework • Sinon as test mocks • Chai as assertion library • Rewire as dependency injection + https://github.com/hulufei/karma-react-boilerplate
Testing Stores • Data persistency • Dispatch actions
beforeEach -> sinon.spy AppDispatcher, 'register' @callback = AppDispatcher.register.args[0][0] rewire =
require 'rewire' # Test cases fakeAction = { actionType: 'ACTION_TYPE' } @callback fakeAction expect(@store.getData()).to.be.equal 'something' # Reset data @store = rewire '../stores/SomeStore' @store.__set__ '_data', 'fake store data'
–http://martinfowler.com/articles/asyncJS.html “Aggressively limit the number of truly asynchronous tests you
write and maintain.” Testing Async Requests
Store API Layer Actions API Layer Testing Async Requests •
Stub API Layer • Use Promise
Stub API API = require './utils/api' stub = sinon.stub API,
'fetch' stub.returns(Promise.resolve fakedResponse) expect(stub).to.be.calledOnce expect(data).to.eql fakedResponse stub.returns(Promise.reject 'fake error') expect(data).to.be.rejected data = Store.getData()
Testing Components • DOM verify • DOM events simulate
React = require 'react/addons' ContextMenu = require '../index' TestUtils =
React.addons.TestUtils describe 'ContextMenu', -> beforeEach -> ContextMenuElement = React.createElement ContextMenu @contextMenuComponent = TestUtils.renderIntoDocument ContextMenuElement @el = React.findDOMNode @contextMenuComponent it 'should render empty context menu', -> expect(@el.className).to.contain 'context-menu' expect(@el.className).to.contain 'hide' it 'should invoke callback on menu close', -> closeSpy = sinon.spy() ContextMenuElement = React.createElement ContextMenu, onMenuClose: closeSpy component = TestUtils.renderIntoDocument ContextMenuElement el = React.findDOMNode component TestUtils.Simulate.blur el expect(closeSpy).to.called.once beforeEach -> ContextMenuElement = React.createElement ContextMenu @contextMenuComponent = TestUtils.renderIntoDocument ContextMenuElement TestUtils.Simulate.blur el expect(closeSpy).to.called.once TestUtils = React.addons.TestUtils React = require 'react/addons' expect(@el.className).to.contain 'context-menu' expect(@el.className).to.contain 'hide'
Awesome React • Immutable.js • Server side rendering • React
styling • Relay and GraphQL • …
Q&A 关注我们