Loading
Alessandro Annini
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
Universita' Politecnica delle Marche
10.12.2014
2010 -2011
2012
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
Internet Explorer uses Trident,
Firefox uses Gecko,
Safari uses WebKit
Chrome and Opera (from version 15) use Blink, a fork of WebKit
(Document Object Model)
<html>
<body>
<p>
Hello World
</p>
<div> <img src="example.png"/></div>
</body>
</html>
DOM tree
markup
p, di {
margin-top: 3px;
}
.error {
color: red;
}
Style Sheet
CSS parsed
The renderers correspond to DOM elements, but the relation is not one to one.
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
context var context = Engine.createContext();
│
surface context.add(surface);
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
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
Comparison Table
scaffolding
front-end package
management
task runner,
automation
scaffolding
front-end package
management
task runner,
automation
npm
generator-famous
A Version Control System (VCS) is software that helps developers track changes to code
Git, Subversion or Mercurial
main benefits:
fork
fork
SVN
GIT
on
GitHub
Offers public and private source code hosting to companies and open source projects using git
Example:
$ npm install colors
# -or-
$ npm install colors -g
# -or-
$ npm install colors --save # will appear in your dependencies
# -and-
$ npm uninstall (-g) colors
{
"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}
# 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
"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
# 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
{
"name": "my-project",
"version": "1.0.0",
"dependencies": {
"<name>": "<version>",
"<name>": "<folder>"
},
}
The Yeoman workflow is comprised of three tools:
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
# 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
AMD (Asynchronous Module Definition)
<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
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);
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
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
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/