A presentation of "famo.us", a new graphical framework for writing cross-platform web apps. (In french)

2. Famo.us ?
a JavaScript platform
to build high end, cross platform‑ ‑
web apps
that perform as well as native
apps.
« It is a serious alternative to building apps
using native technologies. »

3. Phonegap ?
Pas la même chose…
Famo.us = lib graphique, pour UI
Promesse : perfs ~60 fps sans à-coups
Toujours besoin de cordova / phonegap pour
caméra, accéléromètre, etc.
Par contre, effectivement concurrent de
Sencha Touch

8. Pourquoi Famo.us ?
DOM = LENT
→ Natif (iOS, Androïd)
"HTML5 failed so spectacularly as a way to
develop high-quality consumer applications"
"people really, really want the web to win"
"Famo.us shows the first real glimmers of hope"

9. Résumé
● Framework graphique dynamique
● Gère une partie du DOM
● Pour applis web, mobile first
● Cross-browser
● Perfs proches du natif, 3D
● Js ← langage + async + libs = c'est cool
● Stack + simple, cycles + courts

10. Sérieux ?
Open source (Mozilla license)
fastest-growing repo on GitHub
dernier tour ~4M$ (Samsung)

11. Bémols
Encore en beta
Support IE en cours
Lague un peu quand même ;)
Contraintes sur le code
Déclaratif vs. Code (-> Angular)
Bientôt :
sur webGL
Service de cloud

12. Démos réelles
PHQ4
Breezy
Albumatic
Dots

13. Famo.us university

14. Démo perso
Live → bit.ly/ehidf

15. Du code !

16. Créer un projet
● Simple : famous-starter-kit.zip
● Advanced : grunt toolbelt
→ projet complet avec bower, require.js,
.editorconfig, jslint, tests, minification…
npm install -g yo grunt-cli bower generator-famous
mkdir new_project
cd new_project
yo famous
grunt serve
grunt

17. Concepts
● Context
● Surfaces
● Views
● Modifiers : positionnement, animations

18. Rendering tree
context
│
modifier
│
scrollview
┌───┬───┼───────┐
S1 S2 S3 S10⋯
┌─────┴─────┐
modifier1 modifier2
│ │
surface1 surface2

19. DOM
● Pas de manipulation du DOM
● Window.requestAnimationFrame()
● DOM events → events famo.us
● setInterval → timers famo.us
● animations → famo.us stateModifier CSS 3D

20. Sous le capot...
Allons voir le DOM :
● DOM plat (au niveau layout)
● réutilisation de DIV

21. Physique, 3D, angular

22. Merci !
● à Rodolfo, Damien, Yannick…

23. Notes
Site officiel https://famo.us/
Github https://github.com/Famous/famous
Examples officiels https://github.com/Famous/examples
git clone https://github.com/Famous/examples.git ­­recursive famous_examples
Paper demo https://www.youtube.com/watch?v=nO6ZwYwwii8
Angular-famous http://famo.us/integrations/angular/
Stack overflow http://stackoverflow.com/questions/tagged/famo.us
Tous les liens : http://offirmo.net/wiki/index.php?title=Famo.us