visualweb - building a nodejs server meshwork and full-javascript stack framework
DESCRIPTION
A series of slides about building a one-page-webapp framework and api called VisualWeb. We run two independent services on this full-javascript stack: meinunterricht.de and mylinkcloud.com . we use nodejs, socket.io. hook.io, connect and mongodb to build hyperdynamic, desktop-like web experiences.TRANSCRIPT
Building a meshworkof nodeJS servers
to run a live-syncedone-page WebApp
Who‘s talking to you here?
Toni Wagner
PhD in molecular biology
Learned Basic when computers were still breadboxes
I built solutions for my lab and ended up doing it out of my box
https://meinunterricht.de
https://mylinkcloud.com
Create a Desktop-Experience
Web App
fast... short initial load time
no latency for user interactions
no internal page loads
live-sync
reliabile... no data loss
safe passwords
safe accounting data
live-failover
modular... code modules largely independent
modules distrubutable across servers
client plug & play per account type
extendable...(open) API for client modules
(open) API for other clients
readable code
There is nothing like that, so let‘s build it from
scratch!!!
VisualWeb
SERVERSCLIENT
jQuery
jQuery-Ui
socket.io
connect
mongoDB
nodeJS
doThook.io
Logging
Web(api)
API
Payment
Search
MeshHook
Files DB
CLIENTS
Models&
Controllers
How to run communication ????????????
between clients and servers
between clients and clients
between servers and servers
between client code modules
between server code modules
jQuery(„#C“).trigger(„click“);
<div id=„A“><div id=„B“>
<div id=„C“></div>
</div></div>
jQuery(„#A“).bind(„click“, f(e) { alert(„yo“);});
/universe/milkyway/sol/earth/europe/germany/börlin/
topicbranch
/universe/milkyway/sol//universe/milkyway/sol/earth/
/universe/milkyway/sol/earth/europe/
/universe/milkyway/sol/earth/europe/germany/
/universe/universe/milkyway/
/
bubPubSub.subscribe(„/client/desktop/show/ “,function(pubData) {
announce(„Now showing desktop „ + pubData.desktop.name);},options,subscriber
);
bubPubSub.subscribe(„/client “,function(pubData) {
log(„showing desktop „ + pubData.desktop.name);},options,subscriber
);
bubPubSub.publish(„/client/desktop/show/12345678“,someData,options,publisher
);
bubPubSub.subscribe(„/server “,function(pubData, pubTopic) {
socket.send(pubTopic, pubData);},options,subscriber
);
bubPubSub.subscribe(„/client “,function(pubData, pubTopic) {
socket.send(pubTopic, pubData); },options,subscriber
);
bubPubSub.publish(„/server/desktop/get/12345678“,someData,options,publisher
);
but SYNC ??????
between clients on different servers
between clients on the same server
bubPubSub
on top of
HOOOOOOOOOOOOOOOOOOOOOOOK.io
Hook.io propagates events across connected instancesvia an event (=== simple pubSub) system.
Hook.io employs socket.io to establish connections between the connected instances.
We connect all servers to the meshwork via IPv6
All server types are spawnable Ubuntu 12.04 VMs
We have a meshingNeeded Filter sitting at bubPubSub rootWe have a hook/bubPubSub adapter to determine receivers
Our ChannelSystem allows event-specific syncas each Socket has specific channels for
Socket-specific messages
User-specific messages
Desktop-specific messages
Item-specific messages
UserGroup-specific messages
DISCUSS PLEASE!
Building a Frameworkon a
Javascript-Only Stack
Create a Desktop-Experience
Web App
fast... short initial load time
no latency for user interactions
no internal page loads
live-sync
reliabile... no data loss
safe passwords
safe accounting data
live-failover
modular... code modules largely independent
modules distrubutable across servers
client plug & play per account type
extendable...(open) API for client modules
(open) API for other clients
readable code
There is nothing like that, so let‘s build it from
scratch!!!
VisualWeb
Alright, but WhyTheF...
all in JavaScript?
It‘s a lot easier to learn....
It‘s a lot easier to teach....
It‘s a lot easier to maintain....
It‘s a lot easier to extend....
It‘s a lot easier to keep code quality....
It‘s a lot easier to re-use code....
It‘s a lot easier to document well....
Chrome and V8 are not going away....
HTML5 & JS are here to stay.....
HTML5 is the only winner in the OS fragmentation war....
Javascript has the fastest evolving interpreters...
Javascript is untyped, just like the web...
Javascript is the only language i know anything about !!!
Javascript is JSON...
Why the hell should we render anything serverside?
Losing state? What‘s that good for?
Dynamic is not enough! Super-Hyper-Dynamically interactive is what we want!!
Responsive layouts are a very tiny prison cell.
SERVERSCLIENT
jQuery
jQuery-Ui
socket.io
connect
mongoDB
nodeJS
doThook.io
We will constantly publish open-source modules.
• bubPubSub• aList• aEscalator
Up to now, we released...
Soon, we will release
A fork of jQueryUI that deals with scaling for drag and drop
A fork of oAuth2 server-sided services following the standards
Later, we will release
The public parts of our API to allow third-party development.Yoda, our websocket and hook.io focused load balancer.
A description for our new publishing format.
Well, that‘s it for talking into the dark ..
So, why don‘t you Ask and Criticise so we can discuss a bit?
Reach me via
@itsatony on twitter
http://about.itsatony.com
http://coffeelog.itsatony.com
I AM ON GEEKLIST
https://github.com/itsatony