Famo.us ?
a JavaScript platform
to build high end, cross platform‑ ‑
web apps
that perform as well as native
apps.
« It is...
Phonegap ?
Pas la même chose…
Famo.us = lib graphique, pour UI
Promesse : perfs ~60 fps sans à-coups
Toujours besoin de co...
Pourquoi Famo.us ?
DOM = LENT
→ Natif (iOS, Androïd)
"HTML5 failed so spectacularly as a way to
develop high-quality consu...
Résumé
● Framework graphique dynamique
● Gère une partie du DOM
● Pour applis web, mobile first
● Cross-browser
● Perfs pr...
Sérieux ?
Open source (Mozilla license)
fastest-growing repo on GitHub
dernier tour ~4M$ (Samsung)
Bémols
Encore en beta
Support IE en cours
Lague un peu quand même ;)
Contraintes sur le code
Déclaratif vs. Code (-> Angul...
Démos réelles
PHQ4
Breezy
Albumatic
Dots
Famo.us university
Démo perso
Live → bit.ly/ehidf
Du code !
Créer un projet
● Simple : famous-starter-kit.zip
● Advanced : grunt toolbelt
→ projet complet avec bower, require.js,
.ed...
Concepts
● Context
● Surfaces
● Views
● Modifiers : positionnement, animations
Rendering tree
context
│
modifier
│
scrollview
┌───┬───┼───────┐
S1 S2 S3 S10⋯
┌─────┴─────┐
modifier1 modifier2
│ │
surfa...
DOM
● Pas de manipulation du DOM
● Window.requestAnimationFrame()
● DOM events → events famo.us
● setInterval → timers fam...
Sous le capot...
Allons voir le DOM :
● DOM plat (au niveau layout)
● réutilisation de DIV
Physique, 3D, angular
Merci !
● à Rodolfo, Damien, Yannick…
Notes
Site officiel https://famo.us/
Github https://github.com/Famous/famous
Examples officiels https://github.com/Famous/...
Pizza party - Présentation de famo.us
Pizza party - Présentation de famo.us
Pizza party - Présentation de famo.us
Pizza party - Présentation de famo.us
Pizza party - Présentation de famo.us
Upcoming SlideShare
Loading in …5
×

Pizza party - Présentation de famo.us

531 views
365 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
531
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Pizza party - Présentation de famo.us

  1. 1. 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. »
  2. 2. 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
  3. 3. 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"
  4. 4. 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
  5. 5. Sérieux ? Open source (Mozilla license) fastest-growing repo on GitHub dernier tour ~4M$ (Samsung)
  6. 6. 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
  7. 7. Démos réelles PHQ4 Breezy Albumatic Dots
  8. 8. Famo.us university
  9. 9. Démo perso Live → bit.ly/ehidf
  10. 10. Du code !
  11. 11. 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
  12. 12. Concepts ● Context ● Surfaces ● Views ● Modifiers : positionnement, animations
  13. 13. Rendering tree context │ modifier │ scrollview ┌───┬───┼───────┐ S1 S2 S3 S10⋯ ┌─────┴─────┐ modifier1 modifier2 │ │ surface1 surface2
  14. 14. DOM ● Pas de manipulation du DOM ● Window.requestAnimationFrame() ● DOM events → events famo.us ● setInterval → timers famo.us ● animations → famo.us stateModifier CSS 3D
  15. 15. Sous le capot... Allons voir le DOM : ● DOM plat (au niveau layout) ● réutilisation de DIV
  16. 16. Physique, 3D, angular
  17. 17. Merci ! ● à Rodolfo, Damien, Yannick…
  18. 18. 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

×