JS libraries by Mozilla for you

Mozilla created in the last years many JavaScript libraries that can help you on your dev life and maybe you don't know them.

JS libraries by Mozilla for you

By Daniele Scasciafratte

It's me, Mario ehm Daniele!

Me

Mozilla and JavaScript

LocalForage

  1. Fast and simple storage library
  2. Improve offline experience
  3. Wrapper for asynchronous web storage
  4. Storing blobs, array, JS objects
  5. Use localStorage or IndexedDB or WebSQL
  6. Custom drivers: sessionStorage, Cordova SQLlite
  7. Extensions
  8. Promises

https://github.com/mozilla/localforage

localForage Example

			localforage.setItem(key, value, function() {
			  console.log('Saved: ' + value);
			});
			 
			localforage.getItem(key, function(err, readValue) {
			  console.log('Read: ', readValue);
			});
				

fxPay

  1. Wrapper for mozPay
  2. Support Firefox Marketplace in a web application

https://github.com/mozilla/fxpay

nunjucks

  1. Template engine
  2. Asynchronous template loading
  3. Template inheritance
  4. Jinja2 port in JavaScript
  5. Django existing templates supported
  6. Works in NodeJS
  7. Used in: Firefox Marketplace, WebMaker, Backbeam, Apostrophe CMS

https://github.com/mozilla/nunjucks

nunjucks Examples

			{% extends "base.html" %}
			{% asyncAll item in items %}
			  <li>{{ item.id | lookup }}</li>
			{% endall %}
			{% block content %}
			  {{ page.content }}
			{% endblock %}
				

MetricsGraphics.js

  1. Built on top of D3
  2. Line charts, scatterplots, histograms, bar charts, data tables
  3. JSON objects supported

https://github.com/mozilla/metrics-graphics

http://metricsgraphicsjs.org/examples.htm

PDF.js

  1. PDF viewer in HTML5
  2. Integrated in Firefox and ownCloud
  3. Inspired ViewerJS - Viewer for Open Document format (ODT)

https://github.com/mozilla/pdf.js

A-Frame

  1. Virtual Reality experiences in the Web
  2. Cardboard and Oculus Rift support
  3. Many components for the 3D scenes

https://aframe.io/

A-Frame Examples

			<a-scene>
			</a-scene>
				

Sweet.js

  1. Macro syntax like Scheme and Rust
  2. Before ES6 macro

http://sweetjs.org/

VTT.js

  1. WebVTT implementation
  2. Integrated in Firefox

https://github.com/mozilla/vtt.js

Popcorn.js

  1. Framework for interactive timeline
  2. Support for YouTube, Vimeo, <video>
  3. Plugin for: Google Maps, Facebook, Flickr, Feed, Lastfm, Linkedin, Lowerthird, Open Street Map, Twitter

http://popcornjs.org/

L20n.js

  1. Localization framework

http://l20n.org/

Together.js

  1. Real Time Collaboration
  2. Chat and Microphone with WebRTC
  3. Public server or custom server
  4. Show cursor pointer of other people on the same page

https://togetherjs.com/

Exif Parser

  1. Read & Write Exif metadata
  2. Integrated on Firefox OS

https://github.com/mozilla-b2g/exif-parser

Shumway

  1. Flash in HTML5
  2. Integrated on Firefox OS

http://mozilla.github.io/shumway/

Emscripten

  1. LLVM(C/C++)-to-JavaScript Compiler
  2. Any language that translated into LLVM bytecode
  3. Unity 3D, Unreal Engine export to HTML5
  4. Default output is for asm.js

http://emscripten.org/
https://github.com/kripken/emscripten/wiki/Porting-Examples-and-Demos

Firefox Platform Status

  1. Roadmap for browser features
  2. Browser Table comparison
  3. Resources

https://platform-status.mozilla.org/

CSS:fixme

  1. From non-standard CSS
  2. Add standard CSS

https://github.com/webcompat/css-fixme

FuzzManager, DOMFuzz, FunFuzz

  1. Fuzzer
  2. JavaScript fuzzer
  3. DOM fuzzer
  4. Used in Firefox

https://github.com/MozillaSecurity/FuzzManager
https://github.com/MozillaSecurity/funfuzz
https://github.com/MozillaSecurity/funfuzz/tree/master/dom
https://github.com/MozillaSecurity/funfuzz/tree/master/js/jsfunfuzz

Question?

Red panda (Firefox)
Daniele Scasciafratte | @Mte90Net | Slides: mte90.github.io/Talk-JS-Mozilla/