Electron, Flux + React
-
Upload
speak -
Category
Technology
-
view
2.113 -
download
0
Transcript of Electron, Flux + React
![Page 8: Electron, Flux + React](https://reader031.fdocuments.in/reader031/viewer/2022021922/5871aaf31a28abda6a8b5741/html5/thumbnails/8.jpg)
Chromi ummmmCross platform full stack AV implementation
WebRTC as a first class citizen, always being improved upstream
NodeAccess to underlying system
SpeedLean startup, MVP
Known technologies, CSS & Javascript, NW.js
Cross platform a must for communication tools
![Page 10: Electron, Flux + React](https://reader031.fdocuments.in/reader031/viewer/2022021922/5871aaf31a28abda6a8b5741/html5/thumbnails/10.jpg)
MicroservicesRabbitMQ message bus
Distinct services for calls, authentication, websockets, audio mixing, api…
Mixture of Ruby and Go languages
Realtime APIEvents with payloads over websockets
Transactions for responses
![Page 15: Electron, Flux + React](https://reader031.fdocuments.in/reader031/viewer/2022021922/5871aaf31a28abda6a8b5741/html5/thumbnails/15.jpg)
RenderersMain, Dock, Call, (Preferences, Teams, Invites …)
Each renderer has it’s own React entry point
Each renderer has it’s own Flux Dispatcher and copy of all stores
Events are forwarded bi-directionally through IPC
Main RendererWe have one main renderer that communicates with server, renders audio etc
Because complex objects can’t be passed over IPC
Ensure this is never closed, only hidden
![Page 17: Electron, Flux + React](https://reader031.fdocuments.in/reader031/viewer/2022021922/5871aaf31a28abda6a8b5741/html5/thumbnails/17.jpg)
User clicksdock renderer user-
menu.jsx
var React = require('react/addons');
var UserActions = require('../actions/user-actions');
var UserMenu = React.createClass({
call: function() {
UserActions.call(this.props.item);
},
render: function(){
return <ul className="actions user-actions">
<li key="call"><a onClick={this.call} className="positive"><i className="
icon-call"></i></a></li>
</ul>;
}
});
module.exports = UserMenu;
![Page 18: Electron, Flux + React](https://reader031.fdocuments.in/reader031/viewer/2022021922/5871aaf31a28abda6a8b5741/html5/thumbnails/18.jpg)
Event Dispatched
dock renderer
user-actions.js
var AppDispatcher = require('../dispatcher/app-dispatcher');
var UserStore = require('../stores/user-store');
var UserActions = {
call: function(user) {
AppDispatcher.dispatch('channel.invite', {
user_id: user.id,
sender_id: UserStore.get('id')
});
}
...
};
module.exports = UserActions;
![Page 19: Electron, Flux + React](https://reader031.fdocuments.in/reader031/viewer/2022021922/5871aaf31a28abda6a8b5741/html5/thumbnails/19.jpg)
IPC Senddock renderer
app-dispatcher.js
var ipc = require('ipc');
var browserWindow = require('remote').getCurrentWindow();
var AppDispatcher = Flux.createDispatcher({...});
// receive events from main process
ipc.on('event', function(action, payload, opt, browser_id) {
if (browser_id != browserWindow.id) {
AppDispatcher.dispatch(action, payload, opt, browser_id);
}
});
// send events from this renderer to main process
AppDispatcher.register(function(action, payload, opt, browser_id) {
if (!browser_id) {
ipc.send('event', action, payload, opt, browserWindow.id);
}
});
module.exports = AppDispatcher;
![Page 20: Electron, Flux + React](https://reader031.fdocuments.in/reader031/viewer/2022021922/5871aaf31a28abda6a8b5741/html5/thumbnails/20.jpg)
IPC Receivenode process
dispatcher.js
class AppDispatcher {
constructor(windows) {
ipc.on('event', function(ev, action, payload, opts, browser_id){
this.dispatch(action, payload, opts, browser_id);
}.bind(this));
}
dispatch(action, payload, opts, browser_id) {
browser_id = browser_id || 'node';
_.each(global.application.windows, function(window, window_id){
if (window_id != browser_id) {
window.browserWindow.webContents.send('event', action,
payload, opts, browser_id);
}
});
}
}
![Page 21: Electron, Flux + React](https://reader031.fdocuments.in/reader031/viewer/2022021922/5871aaf31a28abda6a8b5741/html5/thumbnails/21.jpg)
IPC Receivemain renderer
app-dispatcher.js
var ipc = require('ipc');
var browserWindow = require('remote').getCurrentWindow();
var AppDispatcher = Flux.createDispatcher({...});
// receive events from main process
ipc.on('event', function(action, payload, opt, browser_id) {
if (browser_id != browserWindow.id) {
AppDispatcher.dispatch(action, payload, opt, browser_id);
}
});
// send events from this renderer to main process
AppDispatcher.register(function(action, payload, opt, browser_id)
{
if (!browser_id) {
ipc.send('event', action, payload, opt, browserWindow.id);
}
});
module.exports = AppDispatcher;
![Page 22: Electron, Flux + React](https://reader031.fdocuments.in/reader031/viewer/2022021922/5871aaf31a28abda6a8b5741/html5/thumbnails/22.jpg)
WebSocketsmain renderer
socks.js
var Socks = {
actions: {
'channel.invite': 'send',
...
},
send: function(action, params, options) {
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
var data = {key: action};
if (params) data.params = params;
if (options) data.transaction_id = options;
this.ws.send(JSON.stringify(data));
return true;
}
}
};
module.exports = Socks;
![Page 25: Electron, Flux + React](https://reader031.fdocuments.in/reader031/viewer/2022021922/5871aaf31a28abda6a8b5741/html5/thumbnails/25.jpg)
Extend the flux store
var Store = function(definition) {
return Flux.createStore(_.extend({
initialize: function() {
this.rehydrateStore();
this.onChange(function(){
LocalStorage.set(this.storeName, this.state);
}.bind(this));
},
rehydrateStore: function() {
var data = LocalStorage.get(this.storeName);
if (data) {
this.state = _.extend(this.state, data);
this.emit('change');
}
}
}, definition));
};
Using Delorean
![Page 27: Electron, Flux + React](https://reader031.fdocuments.in/reader031/viewer/2022021922/5871aaf31a28abda6a8b5741/html5/thumbnails/27.jpg)
DesignWe come up with a lot of wild and wacky ideas…
Build on the advantages of Electron, not the disadvantages
Don’t dupe native styles and controls if possible
Complex objects limit designs (e.g streams)
![Page 28: Electron, Flux + React](https://reader031.fdocuments.in/reader031/viewer/2022021922/5871aaf31a28abda6a8b5741/html5/thumbnails/28.jpg)
PerformanceJavascript is FAST
IPC is slow, avoid at all costs
Starting windows is slow, we keep some open and hidden (hibernate?)
Each renderer and crash reporter is a process (it adds up quickly!)
![Page 29: Electron, Flux + React](https://reader031.fdocuments.in/reader031/viewer/2022021922/5871aaf31a28abda6a8b5741/html5/thumbnails/29.jpg)
Windows & LinuxCare of platform differences, conventions, wording
Chromium still renders css differently occasionally
Updates for each platform are quite different
Virtual machines, VMWare for developing on Windows
NPM3 for long file paths
Github for Windows recommended!