A new framework for a new web QCon SF - November 2012 - Owen Barnes - - PowerPoint PPT Presentation

▶
a new framework for a new web
SMART_READER_LITE
LIVE PREVIEW

A new framework for a new web QCon SF - November 2012 - Owen Barnes - - PowerPoint PPT Presentation

Mar 03, 2024 201 likes •725 views

SocketStream A new framework for a new web QCon SF - November 2012 - Owen Barnes About me Full stack web developer Used RoR commercially for 5 years Worked at AOL for 4 years (online advertising division) Helping companies get the most of

slide-1
SLIDE 1

QCon SF - November 2012 - Owen Barnes

A new framework for a new web

SocketStream

slide-2
SLIDE 2

About me

Full stack web developer Used RoR commercially for 5 years Worked at AOL for 4 years (online advertising division) Helping companies get the most

  • f the the real time web and Node.js
slide-3
SLIDE 3

SocketStream www.socketstream.org

slide-4
SLIDE 4

Is it possible to make a web app where all the data flowed over the websocket?

?

slide-5
SLIDE 5

2 years later...

slide-6
SLIDE 6
  • 1. Static

The next phase of the web is Realtime

  • 2. Dynamic
  • 3. Realtime
slide-7
SLIDE 7

Expectations change over time

slide-8
SLIDE 8

Mobile apps rarely need refreshing Nor should web apps

Expectations change over time

slide-9
SLIDE 9

a web framework

  • 1. Dedicated to building single-page apps
  • 2. All application data flows over the websocket

SocketStream

slide-10
SLIDE 10

Why bother with a framework?

slide-11
SLIDE 11

Rails became so popular because it eliminated pointless decisions and gave developers to freedom to create

slide-12
SLIDE 12

Out of the box Node gives you:

var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(1337, '127.0.0.1'); console.log('Server running at http://127.0.0.1:1337/');

a request and response object

slide-13
SLIDE 13

Client-side Templates Live CSS/HTML Reload Sessions Asset Packing Connection Handling HTTP/Auth Integration CDN Support Code Organization

Essentials for all realtime apps

Code Pre-processors Mobile Clients Testing PushState Routing

slide-14
SLIDE 14

Features

0.3

slide-15
SLIDE 15

Optional modules for all tastes

Stylus

and many more...

Jade

slide-16
SLIDE 16

Modular Transport Layer

SockJS

Change websocket transport without changing your app

Engine.IO

slide-17
SLIDE 17

Full Node.js Compatibility

Embraces Node.js, doesn’t try to abstract it away Use it alongside Express, EveryAuth, Mongoose and more Uses Connect Session Store - share sessions with Express Start your app with node app.js not socketstream start

slide-18
SLIDE 18

Define Multiple Single-page Clients

Serve custom views, CSS and JS code to different devices without duplicating files

slide-19
SLIDE 19

Client Framework Agnostic

Ember.js

slide-20
SLIDE 20

Client-side Templates

{ }

Great support for any client-side templates Modules for Hogan, Jade, CoffeeKup and more Templates can be pre-compiled server-side Combine multiple template types together

slide-21
SLIDE 21

Client-side Modules

Use ‘require’ in the browser Share code between client/server Modules work like they do in Node.js Use Node.js system libs in the browser The best way to organise large projects

slide-22
SLIDE 22

Designed for modern apps

Easily use Webworkers Support for Push State routing

slide-23
SLIDE 23

Where are we today?

slide-24
SLIDE 24

Progress so far

✓ Stable 0.3 version with production users ✓ Over 2200 Github watchers ✓ Active Google Groups / IRC community ✓ Feature complete (core)

  • Documentation / Website
  • Demo Apps

x Screencasts

slide-25
SLIDE 25

Demos

0.3

slide-26
SLIDE 26

https://github.com/socketstream/socketstream

0.3 available today!

slide-27
SLIDE 27

0.4

Preview

(In active development - subject to change)

slide-28
SLIDE 28

✓ High performance ✓ Minimal bandwidth ✓ Reliability at scale ✓ Easy to get started ✓ Transport agnostic ✓ Minimal client-side code ✓ Excellent mobile compatibility

Goals

slide-29
SLIDE 29

Instant productivity Full control

  • f your

stack Meteor Derby SocketStream ‘Roll Your Own’ Socket.IO

Frameworks

slide-30
SLIDE 30

Major trend

Small modules Large frameworks

slide-31
SLIDE 31

SocketStream would be a community

  • f developers dedicated to making realtime

apps by combining existing modules

In a ideal world

slide-32
SLIDE 32

We write minimal software to integrate the best modules & obey standard Node conventions

but until then

slide-33
SLIDE 33

Node Streams to the rescue!

search for “LXJS streams”

slide-34
SLIDE 34
  • 1. Transmit data incrementally
  • 2. A standard API

Benefits of Streams

(blessed by the brightest minds in the Node community)

https://github.com/substack/stream-handbook

slide-35
SLIDE 35

Also new in 0.4

✓ Re-written everything in vanilla JS ✓ Bundled with Engine.io by default ✓ Improved Request Responder API ✓ Much better logging (silent by default) ✓ Improved asset packing, with GZip support ✓ Improved architecture and design

slide-36
SLIDE 36

So what will we NOT do?

slide-37
SLIDE 37

Not designed for SEO

SocketStream apps typically:

  • require a login to pass the first page
  • contain very little indexable content
  • are more like iPad apps than websites

The priority is a clean, efficient system for building modern realtime apps

slide-38
SLIDE 38

How best to integrate models into SocketStream

?

slide-39
SLIDE 39

/app/models

slide-40
SLIDE 40

DON’T DO IT!

slide-41
SLIDE 41

Models are tricky to get right...

Ember.js

n client-side frameworks n persistent stores

WEBSOCKET TRANSPORT
slide-42
SLIDE 42

...and they’re not always needed

RESTful API Streaming API

slide-43
SLIDE 43

Introducing Streamable Services

An API to handle messages and deliver code One module. Multiple interfaces.

HTTP Websocket Command Line

(Testing) Process Request
slide-44
SLIDE 44

Services Overview

Three responders bundled: pubsub, rpc, liveReload Direct access to the websocket Provide custom client/server code Automatically multiplexed over the WebSocket Allow different ideas around models to thrive Perfect for high-speed gaming, presence and more ss-angular and ss-backbone already available!

slide-45
SLIDE 45

0.4

Demo

slide-46
SLIDE 46

Play with the code yourself

github.com/socketstream/socketstream-0.4

slide-47
SLIDE 47

We have the audience, the interest, and the community

slide-48
SLIDE 48

If you’re interested in building realtime apps at scale, get in touch

  • wen@socketstream.org
slide-49
SLIDE 49

And finally...

Big thanks to Guillermo Rauch (Socket.IO), TJ Holowaychuk (Stylus, Jade), Substack (Browserify), Mihai Bazon (UglifyJS), Isaac Schlueter (NPM), Salvatore Sanfilippo (Redis) and Ryan Dahl (creator of Node.js)

slide-50
SLIDE 50

Q&A

@socketstream @temporalwave

slide-51
SLIDE 51

Thank you!

@socketstream @temporalwave