Steve Newcomb

  • I gained the ability to admit my fears of failing

  • I have lost the fear of trying bold new things

  • I have always tried to share my knowledge expecting nothing in return

Mark Lu

  • I began coding as a child

 

  • I have possessed a deep desire to understand the technology I come across on a daily basis and wonder how they can be better

HTML5 Promises

2010 -2011

2012

"The biggest mistake we've made as a company is betting on HTML5 over native."

Mark Zuckerberg - 2012

Famo.us

  • Open source web rendering engine
  • High performance animations
  • Cross platform
  • No plugins needed
  • 100% javascript
  • Alternative to native

Famo.us own layout rendering engine (instead of the one in the browser)

Abstraction from what we have to render to, so we can render to everything (DOM, Canvas, SVG and WebGl at the same time)

A 3D physics animation engine integrated into the layout engine

How?

Surfaces

  • ..are the fundamental building block of famo.us interfaces

  • ..are agnostic to content

The scene is prepared in JavaScript and then is posted to DOM. The future will include Canvas, SVG, and WebGL similarly

THE RIGHT TOOL FOR THE RIGHT JOB

Collaborating with

Famo.us + JQuery

Integrating With

Examples of integration

Famo.us + d3.js

  • Use d3’s data-binding and Famo.us’ surfaces and rendering capabilities to create awesome charts and graphs

Famo.us + Firebase

  • Focus on the front-end and let Firebase take care of the rest

Famo.us + Meteor

  • For those that can’t get enough Meteor

Famo.us + React

  • Famo.us with Facebook’s React

Famo.us + Maps

  • Add map components to the Famo.us render tree and also use Famo.us modifiers to pan the map and sync the position of renderables

Other frameworks

Inside Browsers

Browser components

Rendering Engine specialities:

  • HTML
  • CSS
  • images
  • other via plugins

Internet Explorer uses Trident,

Firefox uses Gecko,

Safari uses WebKit

Chrome and Opera (from version 15) use Blink, a fork of WebKit

HTML content to screen

Parser

  • vocabulary
  • syntax

DOM Tree

(Document Object Model)

  • tree
  • elements (nodes) --> interfaces for ext. world like javascript
  • attributes

DOM structure

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="example.png"/></div>
  </body>
</html>

DOM tree

markup

WebKit CSS Parser

p, di {
  margin-top: 3px;
}

.error {
  color: red;
}

Style Sheet

CSS parsed

We now have 2 trees

  • DOM tree (content)
  • Render tree (layout)

The renderers correspond to DOM elements, but the relation is not one to one. 

Layout

  • Layout is a recursive process. It begins at the root renderer, which corresponds to the <html>
  • proceed left-to-right, top-to-bottom through the document from [0, 0] in one passage (with exceptions)
  • dimensions are the viewport: the visible part of the browser window

Rendering Engine Threads

  • The rendering engine is single threaded
  • network operations have another thread
  • The number of parallel connections is limited (2-6)

The Famo.us Render Tree

Famo.us

Famo.us abstracts away DOM management by maintaining a
representation of it in JavaScript called the Render Tree

This is the Famo.us solution to relative positioning and semantic structure

DOM

  • Relative positioning causes slow page reflows on animating content
  • Semantic structure is not well separated from visual
    rendering in HTML

DOM Nodes

  • <body>
  • <div>
  • <img>
  • <input>
  • <canvas>
  • <video>
  • <div style="overflow: hidden;">

Famo.us Renderables

  • Context
  • Surface
  • ImageSurface
  • InputSurface
  • CanvasSurface
  • VideoSurface
  • ContainerSurface

How to use a renderable

  context                    var context = Engine.createContext();
     │
  surface                    context.add(surface);

Famo.us Modifiers

Modifiers are responsible for the layout (position) and visibility of the Render Tree below them

  context                    var context = Engine.createContext();
     │
  modifier                   var chain = context.add(modifier);
     │
  surface                    chain.add(surface);
var modifier = new Modifier({
    transform : Transform.translate(100,200)
});
  context                    var context = Engine.createContext();
     │
 modifier1                   context.add(modifier1)
     │                              .add(modifier2)
 modifier2                          .add(surface);
     │
  surface

definition

chaining nodes

Views

  • is a base class
  • provides an interface for adding to the Render Tree
  • receive and broadcast events
  • take in default parameters and state variables 
  • they have internal render trees
      context                var context = Engine.createContext()
         │
      modifier               context.add(modifier).add(scrollview);
         │
     scrollview              scrollview.sequenceFrom([S1, S2, S3, ... , S10]);
 ┌───┬───┼───────┐
S1  S2  S3  ⋯  S10
      context                var context = Engine.createContext()
         │
      modifier               context.add(modifier).add(scrollview);
         │
     scrollview              scrollview.sequenceFrom([S1, S2, S3, ... , S10]);
 ┌───┬───┼───────┐
S1  S2  S3  ⋯  S10              S10.add(modifier1).add(surface1);
           ┌─────┴─────┐
       modifier1   modifier2     S10.add(modifier2).add(surface2);
           │           │
       surface1    surface2
  • easier to understand apps
  • easier to manage
  • no performance degradation caused by nesting

Views

Concluding render tree

  • Render Tree makes a clear separation between layout (Modifiers), content (Surfaces) and structure (.add).
     
  • the Render Tree batches changes (retain mode) behind the scenes by buffering them against the requestAnimationFrame API. This ensures changes are resolved at the most optimal time

DOM vs Render Tree

Editors

Text Editor

  • application that allows for the creation of a text-based file.
  • some text editor has typical IDE functions like auto-completion
  • you can make it better with packages and plugins

IDE

  • stand for integrated development environment
  • an application with all programming tools built into a single interface (editor, debugger, profiler, library browser, etc.) 
  • you can run, debug, version control, auto-completion

Comparison Table

Famo.us Atom.io Package

Famo.us SublimeText Package

The Toolchain

Bower

scaffolding

front-end package

management

task runner,

automation

The Toolchain

Bower

scaffolding

front-end package

management

task runner,

automation

npm

generator-famous

modern web developing

What is Version Control

A Version Control System (VCS) is software that helps developers track changes to code

Git, Subversion or Mercurial

main benefits:

  • history
  • collaboration

What is a branch

fork

fork

Subversion (SVN)

  • repository organized in directories: 
    • "trunk" for the main line of development
    • "branches" for alternative contexts
    • "tags" to mark certain revisions
  • when you make a branch you effectively create a copy of your project in a new folder
  • when you commit
    • you have to be connected to the central repository
    • data is instantly transferred to the repository
    • an ascending revision number is assigned
  • if you want to share works you have to know that when you commit you can break your project 

Git (Git)

  • repository consist in 1 directory '.git' and branches or tags are done via commands
  • A branch in Git is simply a pointer to a certain revision, no new directories, and no overhead, All other versions and branches are stored in your local repository, ready to be restored in an instant 
  • when you commit:
    • you can be offline (local repository) until you want to share the code
    • You have to explicitly mark the changes you want in the next commit (even single lines of parts of)
    • Rev. numbers are replaced by "commit hashes"
  • nothing gets uploaded automatically,  sharing work is very safe: conflicts can only occur on your local machine and not on the remote server

SVN

GIT

on

GitHub

GitHub.com

Offers public and private source code hosting to companies and open source projects using git

  • Github naturally teaches you two fundamental aspects of programming: version control and collaboration
  • A GH account is free, any and all of your code can go in different public repositories
  • This naturally becomes your portfolio when you decide to apply for jobs requiring programming experience

Notable Git accounts

Why Git?

  • Save time -it's fast-
  • You can work offline
  • Undo mistakes -rarely delete something-
  • Don't worry -any teammates has a working backup-
  • Make useful commits -only the data you need-
  • Branching is fast and easy
  • Github is great for open-source projects
  • is a wrapper written on top of V8 javascript engine so that you can use it as a javascript interpreter on the server side, so outside the browser
  • is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications
  • is an event based, asynchronous I/O framework that uses Google's V8 JavaScript Engine.
  • uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
  • is good for re-usability of code and the lack of context switching
  • Node Packaged Modules
  • it's the default package manager
  • not maintained by Joyent
  • open source - artistic license

Example:

$ npm install colors
#  -or-
$ npm install colors -g
#  -or-
$ npm install colors --save # will appear in your dependencies
#  -and-
$ npm uninstall (-g) colors

package.json

{
  "name": "my-project",
  "description": "A great project",
  "author": "Charlie Robbins <charlie@Robbins.com>",
  "scripts": {
    "test": "vows --spec --isolate",
    "start": "node index.js",
  },
  "dependencies": {
    "colors": "0.x.x",
    "express": "2.3.x",
    "optimist": "0.2.x"
  }
}

dependencies: An object which contain the dependencies of your package. This will be automatically installed when people install your package. The key of the object is the name of the package and the value is a valid semver range.

scripts: A object which exposes addition npm commands. The object assumes that the key is the npm command and the value is the script path. These scripts can get executed when you run  npm run {command name}

  • He lives in the NPM package repository
  • Yeoman helps you kickstart new projects
  • he uses best practices
  • promote the "Yeoman workflow"
# installing yeoman
$ npm install -g yo

#  install a generator
$ npm install -g generator-famous

# o_0 ??
$ yo famous
# installing yeoman
$ npm install -g yo

#  install a generator
$ npm install -g generator-famous

# A whole buncha stuff!!
$ yo famous

Yeoman scaffolding result

  • app/ is where your pure, non-compiled, non-minified source code lives
  • app/styles/ is where your CSS goes. Again, sub-directories, LESS, Sass, whatevs
  • app/index.html is the non-minified version of index.html that will eventually be squashed and delivered to the client
     
  • Gruntfile.js has all of the build, server, and test tasks defined

"Grunt is a task-based command line build tool for JavaScript projects"

"In one word: automation.

The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes."

# install grunt.js
$ npm install -g grunt-cli

# test / debug app
$ grunt serve

# generate app
$ grunt

Bower.io

  • works by fetching and installing packages from a registry or github
  • keeps track of these packages in a manifest file, bower.json.
# install bower
$ npm install bower

# registered package
$ bower install <package>
#  -or-
$ bower install jquery
# GitHub shorthand
$ bower install desandro/masonry
# Git endpoint
$ bower install git://github.com/user/package.git
# URL
$ bower install http://example.com/script.js

bower.json

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "<name>": "<version>",
    "<name>": "<folder>"
  },
}
  • name (required): The name of your package; please see Register section for how to name your package.
  • version: A semantic version number (see semver).
  • dependencies hash: Packages your package depends upon in production. Note that you can specify ranges of versions for your dependencies.

Yeoman Workflow

The Yeoman workflow is comprised of three tools:

  • the scaffolding tool (yo),
  • the build tool (Grunt)
  • the package manager (Bower and npm).

yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks and Bower dependencies

The Build System is used to build, preview and test your project.

The Package Manager is used for dependency management, so that you no longer have to manually download and manage your scripts

Yeoman workflow + Famo.us

# installing yeoman, grunt, bower and the famo.us generator
$ npm install -g yo grunt-cli bower generator-famous

# make a new directory for the project
$ mkdir newProject
$ cd newProject

# scaffold a new app with yeoman
$ yo famous

# use it
$ grunt serve

# distribute it
$ grunt

alessandro.annini@leaff.it

famo.us meetup italy 10.12.2015

Require.js

AMD (Asynchronous Module Definition)

  • Website performance improvements
  • Fewer page errors
<script type="text/javascript" src="lib/requirejs/require.js" 
    data-main="src/requireConfig"></script>
define(function(require, exports, module) {
    // module code

  module.exports = ContactsView;
});

create AppView.js module

var ContactsView = require('./views/ContactsView');

use AppView module

Surface

ImageSurface

VideoSurface

InputSurface

StateModifier

Bounding Box

Transform

Animation

StateModifier vs Modifier

Brancing Nodes

Physics

HeaderFooterLayout

Scrollview

A very useful visualization thanks to Adnan Wahab

Transforms types:

  • Transform.translate(x,y,z)
  • Transform.scale(x,y,z)
  • Transform.rotate(phi, theta, psi)
  • Transform.skew(phi, theta, psi)
  • Transform.multiply(T1,T2)

Modifiers:

  • size
  • proportion 
  • align
  • origin
  • transform

Carousel

this.slides = [];
this.colorIndex = 0;

for (var i = 1; i <= 23; i++) {
  var slide = new ImageSurface({
    size: [500, 500],
    content: 'content/images/pics/' + i + '.jpg'
  });

  this.slides.push(slide);
};

this.carousel = new Carousel({
  items: this.slides,
  innerContentAreaSize: [450, 450],
  dotsEnabled: true, // optional
  loop: true, // optional
  arrowsPreviousIconURL: 'content/images/icons/arrow_left_dark.svg',
  arrowsNextIconURL: 'content/images/icons/arrow_right_dark.svg',
  contentLayout: Carousel.GridLayout({
    gridDimensions: [3,2]
  })
});

this.add(this.carousel);

Famo.us + WebGL

= MixedMode

DOM vs. MixedMode

Famo.us Labs

For more details on the program or to apply, email labs@famo.us

work alongside famo.us engineering team,

collaborate with others and give feedback

What to do?

you have to start today

devi cominciare oggi

θα πρέπει να ξεκινήσετε σήμερα

ju duhet të fillojë sot

usted tiene que comenzar hoy

du måste börja idag

你也有今天开始

vous devez commencer aujourd'hui

Вы должны начать сегодня

Sie haben heute beginnen

 

Links

Grazie!

Alessandro Annini

Famo.us MeetUp

By Alessandro Annini

Famo.us MeetUp

Famo.us MeetUp Ancona Italy 10.12.2014

  • 2,796

More from Alessandro Annini