Presented at FITC Toronto 2016 See details at www.fitc.ca Hear and walk away with the best open source libraries and tools Jam3 has produced out of its collection of over 100 repositories. ​Learn how an​​ award​-winning agency has gone from being closed source to sharing its “secret sauce” with the community while still staying sane and profiting.​ Objective Exploring some of Jam3’s open source gems Target Audience Web developers, digital agencies, creative coders. Five Things Audience Members Will Learn Why you should Open Source Jam3’s Open Source tools and libraries How to Open Source your company How to manage over 100 Open Source repositories How to create more reusable and modular code

1. All original concepts, designs and
copy 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.com
Email: info@jam3.com
All original concepts, designs and
copy the exclusive property of Jam3

2. MATT
Lead Developer
HELLO
MIKKO
Director of Creative
Technology

3. INTRODUCTION
All original concepts, designs and
copy the exclusive property of Jam3

4. All original concepts, designs and
copy the exclusive property of Jam3
JAM3 IN A NUTSHELL
Highly experiential work
Sites, Installations, AR + VR
A lot of awards
A LOT OF OPEN SOURCE
All original concepts, designs and
copy the exclusive property of Jam3

5. OPEN SOURCE AT JAM3
All original concepts, designs and
copy the exclusive property of Jam3

6. 280 public repos
263 owned
17 forks - Three JS, PIXI, Mapbox etc.
7021 stars across all repos
345 forks across all repos

7. We got SERIOUS in June 2014
∼2 public repos before that
npm + modules
+ LOTS of small modules
+ Bolts vs Engines

8. INGREDIENTS TO THE SECRET SAUCE
All original concepts, designs and
copy the exclusive property of Jam3

9. AE-TO-JSON
https://github.com/jam3/ae-to-json
All original concepts, designs and
copy the exclusive property of Jam3

10. History of building tools for projects.

11. INTERACTIVE DOC
WATERLIFE

12. INTERACTIVE DOC
BEAR 71

13. INTERACTIVE PORTFOLIO
JAM3 WEBSITE

14. HTML5 DATA VISUALIZATION
BJÖRK

15. ANIMATED EXPEDITION GAME
HEART OF THE ARCTIC

16. INTERACTIVE DIGITAL EXPERIENCE
ORANGE FUTURESELF

17. THE FUTURE OF CAR CUSTOMIZERS
MUSTANG CUSTOMIZER

18. Using another app to expedite
building tools is the best way to go.
Designers are familiar with it.

19. After Effects is the Holy Grail.
Heart Of The Arctic – Tendril created many of the animations.

20. AE Exporter
npm i ae-to-json-cli -g

21. Just JSON
+ No renderer
+ Unit tests to check when Adobe changes things
(make video/gif animations of unit tests

22. After I put it up.

23. MATH-AS-CODE
https://github.com/Jam3/math-as-code
All original concepts, designs and
copy the exclusive property of Jam3

24. Explains math notation using JavaScript code samples

25. REACTION
All original concepts, designs and
copy the exclusive property of Jam3

26. GitHub: 2300+ stars
Twitter: 490+ retweets

27. Lots of Open Source contributions

28. Chinese Translation (via Open Source contributors)

29. MATRIX BUILDER
https://github.com/Jam3/MatrixBuilder
All original concepts, designs and
copy the exclusive property of Jam3

30. Writing tech specs is really hard.
There are million browsers and browser versions.

31. How many of you use
CanIUse.com?

32. Two modes (simple and advanced)
Designed to be used by everyone not just devs
Built on top of the caniuse's dataset

33. 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

34. JAM3 LESSONS
https://github.com/Jam3/jam3-lesson
All original concepts, designs and
copy the exclusive property of Jam3

35. All original concepts, designs and
copy the exclusive property of Jam3

36. All original concepts, designs and
copy the exclusive property of Jam3

37. LICENSE SERVER
https://github.com/Jam3/license-server
All original concepts, designs and
copy the exclusive property of Jam3

38. Clients and Open Source
sometimes is a bit weird...

39. Clients want to know up front what open source "libraries"
we will be using on projects.

40. ~20-80 modules
on each project

41. How we handle this
+ Tell them up front ~5-10 modules we'll be using
+ Update them as the projects progresses

42. Before we had a vicious email / legal loop

43. Now we use License Server

44. 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

45. DEVTOOL
https://github.com/Jam3/devtool
All original concepts, designs and
copy the exclusive property of Jam3

46. Run Node.js programs
through Chrome DevTools

48. REACTION
All original concepts, designs and
copy the exclusive property of Jam3

49. 2500+ stars
280+ likes

50. Debugging in the wild
Remy Sharp

51. Profiling
Paul Irish

52. Mixing Node.js and Browser APIs

53. Stream <canvas> to high resolution PNG files

54. OTHER GEMS
All original concepts, designs and
copy the exclusive property of Jam3

55. web-audio-player
Cross-platform, low level, modular, WebAudio-focused

56. F1
A stateful ui library that uses path finding

57. three-bmfont-text
High quality and scalable WebGL text rendering

58. bigwheel
A minimal framework for animation heavy sites

59. glsl-fast-gaussian-blur
Shader components on npm

60. orbit-controls
Generic 3D camera and orbit controls

61. All original concepts, designs and
copy 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