Universita' Politecnica delle Marche
10.12.2014
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?
-
directly use the CSS matrix3d transform to gain
GPU accelerated performance -
makes use of
requestAnimationFrame up to 60 times per second (60 FPS) - a different way of using the DOM which avoids browser relayout
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
- Use d3’s data-binding and Famo.us’ surfaces and rendering capabilities to create awesome charts and graphs
- Focus on the front-end and let Firebase take care of the rest
- For those that can’t get enough Meteor
- Famo.us with Facebook’s React
- 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
This work by Alessandro Filippo Annini is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
Based on a work at http://www.leaff.it/
Famo.us MeetUp
By Alessandro Annini
Famo.us MeetUp
Famo.us MeetUp Ancona Italy 10.12.2014
- 4,570