• Stars
    star
    133
  • Rank 272,600 (Top 6 %)
  • Language
    JavaScript
  • Created about 12 years ago
  • Updated almost 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

High-performance JavaScript UIs

Loris

unmaintained

Loris is a very simple web worker with the following goals:

  • Get non-UI logic out of the UI thread. This is often one of the main causes of underlying client-side performance problems.
  • Safety and simplicity: Normal use of Loris should not cause any concurrency nightmares (deadlock, race conditions, etc).
  • Legacy compatibility: Older browsers won't break and newer browsers will magically get faster.
  • Ignoring web workers: You shouldn't really need to write a web worker yourself unless you have a special use case.

I've included an example in the repo that has a bit of information about it. I've also made it available live at http://www.petehunt.net/slowloris/example.html

Basically, you get an asynchronous eval() function. This is a pretty bad way to write real code; instead you should build a better abstraction on top of Loris to offload as much as you can into the background thread and only do UI updates once the computation is complete.

HOWTO

See the example. Basically all you need to know is Loris.eval(expr, callback, errback); where expr is a string containing the expression to evaluate, callback is the function that gets called with the result of the eval, and errback gets called with any exceptions that may get thrown.

There's also an evalAsync() function if you need to do any fetching. Simply use the callback() and errback() functions to return a value or throw an exception respectively.

FAQ

  • The example isn't working.

Web workers don't work locally; use a web server. Read the paragraph in the example.

  • How should I use this?

First, don't use it. Build your features first. Avoid premature optimization at all costs. Then when it's time to improve performance look for places where your UI stalls and start modifying your code such that the expensive computation gets called from Loris and the callback upates the UI.

  • Where'd my global scope go?

Web workers execute in their own scope. So you won't have any functions or variables from the browser, nor will you have access to the DOM. You can use the importScripts() global in your eval'd code to load .js files similar to how the script tag would do it in the markup. See https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers

  • Why do I only get eval?

Because it's flexible enough to build a good abstraction on, but doesn't encourage you to actually do "real" parallelism.

  • Why do I only get 1 background thread?

Because the point of this is not to utilize multiple cores or be a great framework for building parallel apps, it's just designed to get as much crap out of the UI thread as possible so you can build really responsive client-side apps in JS.

  • What browsers does this work in?

Should "work" everywhere, but you'll only see perf improvements on these browsers: http://caniuse.com/webworkers

  • What should I avoid?

Just don't touch the underlying web worker stuff (Loris.worker or call any web worker stuff in the string you eval).

  • What's next?

I'd like to build an AMD module loader on top of this so you can just pass a module name and function name rather than a string of JS to eval.

  • There isn't a lot of code here, is this even worth putting up on Github?

Yeah. What I think is important is that Loris leaves out a lot of features in order to encourage engineers to build simpler programs using as little parallelism as possible while still solving an important and underserved problem.

Also, writing web workers from scratch is annoying.

  • Why did you build this?

Because it's a shame that the web stack has such a bad reputation on mobile vs. native. Sure, native will probably always beat web on benchmarks, but it shouldn't beat the web stack by as much as it has been. I think this is mostly due to the fact that web front-end engineers put too much computation in the UI thread. There's a few other candidates too: inefficient CSS (and JS that drives the CSS!) and poor network fetching/batching/caching of data and code. Hopefully Loris solves the first problem, education and something like Zepto solves the second one, and something like Backbone solves the third problem.

More Repositories

1

react-howto

Your guide to the (sometimes overwhelming!) React ecosystem.
11,612
star
2

webpack-howto

JavaScript
10,119
star
3

rwb

JavaScript
727
star
4

react-webpack-template

JavaScript
549
star
5

react-boilerplate

Boilerplate for creating a React npm package
JavaScript
544
star
6

react-touch

React photo viewer for mobile
JavaScript
446
star
7

ReactHack

React+Parse+Bootstrap Hackathon toolkit
JavaScript
249
star
8

react-server-rendering-example

Super-basic example of how server rendering works
JavaScript
221
star
9

webpack-require

JavaScript
198
star
10

react-one-hour-email

Build a very simple email client in an hour, step by step.
JavaScript
174
star
11

node-jsx

transparently require() jsx from within node
JavaScript
165
star
12

react-gss

JavaScript
155
star
13

langchain-github-bot

Python
143
star
14

react-raf-batching

A game-like batching strategy for React
JavaScript
134
star
15

react-tutorial

Code from the React tutorial
JavaScript
124
star
16

jsx-loader

JSX loader for webpack
JavaScript
108
star
17

famous-react

JavaScript
78
star
18

dagster-poor-mans-data-lake

Python
74
star
19

react-browserify-template

Quick template for building with Browserify + React
HTML
67
star
20

react-touch-lib

React component library for building inertial touch applications.
JavaScript
63
star
21

yologram

JavaScript
42
star
22

react-multiplayer

Multiplayer React with Firebase
JavaScript
40
star
23

morimodel

Models for Mori
JavaScript
38
star
24

react-xhr

JavaScript
37
star
25

react-tween

JavaScript
29
star
26

react-meteor-preso

JavaScript
26
star
27

react-classset

React.addons.classSet() packaged in npm
JavaScript
22
star
28

react-jqueryui

Wrap jQuery UI widgets in React components
JavaScript
22
star
29

django-reactify

Python
21
star
30

generator-react-library

Yeoman generator for React components
JavaScript
17
star
31

use-state-singleton

yet another redux alternative
TypeScript
15
star
32

dagster-github-stars-example

Python
15
star
33

rust-benchmark

JavaScript
14
star
34

js-css-loader

Define CSS in JS
JavaScript
13
star
35

commonjs-asset-spec

12
star
36

lockless

STM for Python
Python
11
star
37

ratelimiter

The easiest way to add rate limiting to your app
JavaScript
11
star
38

reactify-server-rendering

JavaScript
9
star
39

jsxc

experimental jsx command-line tool
JavaScript
9
star
40

staticify

Browserify all of your static resources
JavaScript
9
star
41

unrouter

JavaScript
8
star
42

zod-args

zod-args is the fastest way to throw together a simple CLI with TypeScript type checking.
JavaScript
8
star
43

sweetjs-loader

webpack loader for sweet.js
JavaScript
8
star
44

reacthack-core

JavaScript
8
star
45

dagster-script-to-assets

Python
6
star
46

sqlconfig

Python
4
star
47

oredev-workshop

JavaScript
4
star
48

rerequire

JavaScript
4
star
49

statics

static assets in npm
JavaScript
4
star
50

zod-json-rpc

TypeScript
4
star
51

generator-react-quickstart

Yeoman generator for React apps and libraries
JavaScript
3
star
52

sharable-components-prototype

JavaScript
3
star
53

react-ember-demo

JavaScript
3
star
54

react-main

JavaScript
3
star
55

ts-json-rpc

TypeScript
3
star
56

stylesheets

Client/server stylesheet management
JavaScript
3
star
57

reactify-server-rendering-tools

JavaScript
3
star
58

react-freezer

JavaScript
3
star
59

omgnosql

OMG! NoSQL!!!
Python
2
star
60

reactbars

DONT EVEN THINK ABOUT IT
JavaScript
2
star
61

dslpy

Domain specific languages embedded in Python
Python
2
star
62

jsxnode

JavaScript
2
star
63

react-graph

immutable client-side graph abstraction with great react integration. fulfills similar use cases to backbone.model
JavaScript
2
star
64

dagster-ml-example

Python
2
star
65

objectid

Python
2
star
66

reactpad

JavaScript
2
star
67

meteor-leaderboard-react

Meteor leaderboard example using React
JavaScript
2
star
68

htmldry

Don't Repeat your HTML
JavaScript
2
star
69

react-meteor

Meteor bindings for React, packaged for npm
JavaScript
2
star
70

browserify-bundler

JavaScript
1
star
71

dagster-data-sources

1
star
72

jsbs

JavaScript boot strap, or JavaScript bullshit, depending on what you prefer
JavaScript
1
star
73

jsonrpc2.0-cli

JavaScript
1
star
74

sketchpad

Python
1
star
75

text-to-pydantic

Python
1
star
76

odsc-talk

Python
1
star
77

inboxfeed

JavaScript
1
star
78

browserify-transform-server-side

JavaScript
1
star
79

ts-json-rpc-client

TypeScript
1
star
80

statics-stylesheets

JavaScript
1
star
81

rx-spinner

A simple reusable spinner component example
JavaScript
1
star
82

react-profiler

A simpler interface to ReactDefaultPerf
JavaScript
1
star
83

react-core

JavaScript
1
star
84

dagster-gitpod

Python
1
star