open sourcing the secret sauce
TRANSCRIPT
All original concepts, designs andcopy the exclusive property of Jam3
Open Sourcing
THE SECRET SAUCE
WHERE
325 Adelaide Street W.Toronto, ON, Canada M5V 1P8
Greetings,
CONTACT
Telephone: (416) 531-5263
ONLINE
Web: jam3.comEmail: [email protected]
All original concepts, designs andcopy the exclusive property of Jam3
MATTLead Developer
HELLO
MIKKODirector of Creative
Technology
INTRODUCTION
All original concepts, designs andcopy the exclusive property of Jam3
All original concepts, designs andcopy the exclusive property of Jam3
JAM3 IN A NUTSHELL
Highly experiential workSites, Installations, AR + VR
A lot of awards
A LOT OF OPEN SOURCE
All original concepts, designs andcopy the exclusive property of Jam3
OPEN SOURCE AT JAM3
All original concepts, designs andcopy the exclusive property of Jam3
280 public repos263 owned
17 forks - Three JS, PIXI, Mapbox etc.
7021 stars across all repos345 forks across all repos
We got SERIOUS in June 2014∼2 public repos before that
npm + modules + LOTS of small modules
+ Bolts vs Engines
INGREDIENTS TO THE SECRET SAUCE
All original concepts, designs andcopy the exclusive property of Jam3
AE-TO-JSONhttps://github.com/jam3/ae-to-json
All original concepts, designs andcopy the exclusive property of Jam3
History of building tools for projects.
INTERACTIVE DOC
WATERLIFE
INTERACTIVE DOC
BEAR 71
INTERACTIVE PORTFOLIO
JAM3 WEBSITE
HTML5 DATA VISUALIZATION
BJÖRK
ANIMATED EXPEDITION GAME
HEART OF THE ARCTIC
INTERACTIVE DIGITAL EXPERIENCE
ORANGE FUTURESELF
THE FUTURE OF CAR CUSTOMIZERS
MUSTANG CUSTOMIZER
Using another app to expedite building tools is the best way to go.
Designers are familiar with it.
After Effects is the Holy Grail.Heart Of The Arctic – Tendril created many of the animations.
AE Exporter
npm i ae-to-json-cli -g
Just JSON
+ No renderer
+ Unit tests to check when Adobe changes things (make video/gif animations of unit tests
After I put it up.
MATH-AS-CODEhttps://github.com/Jam3/math-as-code
All original concepts, designs andcopy the exclusive property of Jam3
Explains math notation using JavaScript code samples
REACTION
All original concepts, designs andcopy the exclusive property of Jam3
GitHub: 2300+ starsTwitter: 490+ retweets
Lots of Open Source contributions
Chinese Translation (via Open Source contributors)
MATRIX BUILDERhttps://github.com/Jam3/MatrixBuilder
All original concepts, designs andcopy the exclusive property of Jam3
Writing tech specs is really hard.
There are million browsers and browser versions.
How many of you use
CanIUse.com?
Two modes (simple and advanced)Designed to be used by everyone not just devs
Built on top of the caniuse's dataset
Matrix Builder was built by Benson Wong and Aaron Morris
Benson was a student at the time - Aaron is a technical director and uses it often
JAM3 LESSONShttps://github.com/Jam3/jam3-lesson
All original concepts, designs andcopy the exclusive property of Jam3
All original concepts, designs andcopy the exclusive property of Jam3
All original concepts, designs andcopy the exclusive property of Jam3
LICENSE SERVERhttps://github.com/Jam3/license-server
All original concepts, designs andcopy the exclusive property of Jam3
Clients and Open Source
sometimes is a bit weird...
Clients want to know up front what open source "libraries"
we will be using on projects.
~20-80 moduleson each project
How we handle this+ Tell them up front ~5-10 modules we'll be using
+ Update them as the projects progresses
Before we had a vicious email / legal loop
Now we use License Server
License server
+ Lists all modules used on a project, what version, and license
+ Updates from pull requests and pushes to server
+ Highlights which modules are our own
+ One button deploy to Heroku
DEVTOOLhttps://github.com/Jam3/devtool
All original concepts, designs andcopy the exclusive property of Jam3
Run Node.js programsthrough Chrome DevTools
REACTION
All original concepts, designs andcopy the exclusive property of Jam3
2500+ stars280+ likes
Debugging in the wild
Remy Sharp
Profiling
Paul Irish
Mixing Node.js and Browser APIs
Stream <canvas> to high resolution PNG files
OTHER GEMS
All original concepts, designs andcopy the exclusive property of Jam3
web-audio-playerCross-platform, low level, modular, WebAudio-focused
F1A stateful ui library that uses path finding
three-bmfont-textHigh quality and scalable WebGL text rendering
bigwheelA minimal framework for animation heavy sites
glsl-fast-gaussian-blurShader components on npm
orbit-controlsGeneric 3D camera and orbit controls
All original concepts, designs andcopy the exclusive property of Jam3
- https://github.com/jam3/ae-to-json
- https://github.com/jam3/ae-to-json-cli
- https://github.com/Jam3/math-as-code
- http://matrixbuilder.jam3.net
- https://github.com/Jam3/MatrixBuilder
- http://jam3.school
- https://github.com/Jam3/license-server
- https://github.com/Jam3/devtool
- https://github.com/Jam3/web-audio-player
- https://github.com/jam3/f1
- https://github.com/jam3/react-f1
- https://github.com/Jam3/three-bmfont-text
- https://github.com/bigwheel-framework/bigwheel
- https://github.com/Jam3/glsl-fast-gaussian-blur
- https://github.com/Jam3/orbit-controls
- https://github.com/fyrd/caniuse