Upload File

famo.us introduction

25
Famo.us Javascript Framework for any device @allenfantasy

Upload: allen-wu

Post on 24-May-2015

354 views

Category:

Technology


1 download

Report

Tags:

DESCRIPTION

Introduction to Famo.us, the Javascript framework for anyone to build performant web application on any devices.

TRANSCRIPT

Page 1: Famo.us introduction

Famo.usJavascript Framework for any device

@allenfantasy

Page 2: Famo.us introduction

Famo.us is…

• A 3D layout engine can render to DOM, Canvas, WebGL • A 3D physics animation engine

A Javascript framework, including:

Page 3: Famo.us introduction

Famo.us is NOT…

• Backbone, Angular, Ember, … • Node.js, Koa, … • jQuery, Prototype, Mootools, …

Page 4: Famo.us introduction

http://disrupt.famo.us/periodic402/!!

http://famous-bird.herokuapp.com/

http://disrupt.famo.us/periodic402/
http://famous-bird.herokuapp.com/
Page 5: Famo.us introduction

Why Famo.us ? • 60 FPS on ANY device • Built-in Physics Engine • Built-in event mechanism • Lightweight (179kb minimized) • Javascript ONLY, NO CSS/HTML (if u want) • Open source & Community

Build up mature, cross-device Web-App that can compete with Native App

Page 6: Famo.us introduction

Famo.us abstracts away DOM management by maintaining a representation called the Render Tree

Page 7: Famo.us introduction

HTMLCSS!

DOMjQuery!Prototype!

[pure Javascript]!…

Traditional Model

Page 8: Famo.us introduction

CSSFamo.us

!Render Tree

DOM

Famo.us Model

HTML

Page 9: Famo.us introduction

Render Tree

• Abstraction of DOM • Context Root • Renderable Basic Unit of content • Modifier Control Renderable’s • style & position

Context

ModifierRenderable

Renderable

Page 10: Famo.us introduction

ContextModifier

Renderable

Context

Renderable

Modifier Renderable

Page 11: Famo.us introduction

Renderable

• Surface <div> • ContainerSurface <div> (Can have children) • InputSurface <input> • ImageSurface <image> •…

Page 12: Famo.us introduction

View• Contains a set of ‘node’s. • Represent part of the page • ‘Subtree’ in Render Tree

Context

Modifier

RenderableView

Page 13: Famo.us introduction

Example

Vertical alignment

Page 14: Famo.us introduction

floater

Page 15: Famo.us introduction
Page 16: Famo.us introduction
Page 17: Famo.us introduction

Context

Surface!(<div>)

Modifier

Page 18: Famo.us introduction

Layout

Header

Footer

Content

HeaderFooterLayout GridLayout

Page 19: Famo.us introduction

Layout

surface 1

surface 3

Sequential Layout FlexibleLayout

1

1

3

surface 2

surface 4

Page 20: Famo.us introduction

Famo.us in Production

•Mobile WebApp + Wechat service for Business• 7 man-month.• Express + Famo.us + Ruby• 95% Javascript, NO HTML• Grunt + Bower + Mocha• Learning curve: 2-3 weeks for Javascript beginners

Page 21: Famo.us introduction

When to use ?

• SPA • when you need fancy animation •Mobile Application (esp. for web devs)

Page 22: Famo.us introduction

Drawbacks

•ONLY ‘View’ • ‘All or Nothing’ • Some specific device issues (e.g Android Keyboard)

Page 23: Famo.us introduction

Possibilities

• Famo.us + Angular (or other MV*) • Famo.us + PhoneGap / Cordova • Famo.us + Ruby (Sinatra / Padrino) •… •More on famo.us

http://famo.us
Page 24: Famo.us introduction

⼲⼴广告时间

•大学城Ruby小组 / Famo.us 讨论小组 • Ruby小组订阅号 •Web实习生招聘

Page 25: Famo.us introduction

Thanks!

[email protected]

mailto:[email protected]

VisionaryScancombinesarichsetofqualitycontrolandproductivi ... · Introduction Introduction VisionaryScancombinesarichsetofqualitycontrolandproductivityfeatureswithasimpleinterfacedesignedspecificallyforscanningandcodingdepositionexhib-

Introduction Section I: Introduction

Systems Analysis I introduction I introduction. 2Systems Analysis - Introduction Contents Introduction Introduction 3 classic phases 3 classic phases

Introduction - University of Cambridge · Introduction. Introduction

 · Contents INTRODUCTION Introduction

EMBER.JS AND FAMO.US: AMBITIOUS APP NEEDS AN AMBITIOUS UI

Introducción / Introduction / Introduction

An Introduction to NSAn Introduction to NS2An Introduction

Introduction and Welcome€¦ · Introduction and Welcome Introduction 4

Introduction to Databases: Introduction

Introduction 1. Introduction

Introduction to Transducers, Introduction to Transducers ... on... · Introduction to Transducers, Introduction to Transducers, Sensors and ActuatorsSensors and Actuators Introduction

Introduction to Logic Introduction

1. Introduction 1. Introduction 1. Introduction 1 ... · Introduction 1. Introduction 1. Introduction 1. Introduction 6061B0242401. The Phone Screen From the Phone screen, you can

CrowPiwithMineCraftPiEdition · 2 CrowPiwithMineCraftPiEdition-Introduction-MinecraftPiEdition-Introduction-Whatyouwillneed-Introduction-RunningMinecraft-Introduction

URBAN STREAM REHABILITATION. INTRODUCTION, OBJECTIVES & IMPACTS INTRODUCTION, OBJECTIVES & IMPACTS INTRODUCTION, OBJECTIVES & IMPACTS INTRODUCTION, OBJECTIVES

INTRODUCTIONS (LEADS) Academic introduction Creative introduction Action introduction Dialogue introduction Overarching societal statements Personal introduction

Introduction Introduction Introduction Introduction

INTRODUCTIONS (LEADS) Creative introduction Action introduction Dialogue introduction Personal introduction Question introduction Quotation introduction

Famo.us - build native quality apps using html5 within a day

1. Introduction 10 - therackonline.com€¦ · 1. Introduction 10 - therackonline.com ... Introduction)

Famo.us: From Zero to UI

Introduction to introduction to introduction to … Optimization

Introduction | Introduction | Millennium Serials · 2018. 4. 17. · MARC Display | Print | Introduction | Millennium Serials INTRODUCTION Introduction This tutorial introduces the

Js foo famo.us- build native quality apps using html5 within a day

 · Introduction . 6 . Contents . Introduction

General introduction 1.1 Introduction

1 Introduction t 1. Introduction to Nanotechnology - UFAMhome.ufam.edu.br/berti/nanomateriais/Introduction to Nanotechnology... · Introduction t 1. Introduction to Nanotechnology

INTRODUCTION SPECIFICATIONS INTRODUCTION

Introduction - daks2k3a4ib2z.cloudfront.net€¦ · Introduction Establishedin1974MarbleHillFireplacesofferoneofthelargestandmostcomprehensiveselectionsof …

PRODUCT INTRODUCTION Company Introduction

Famo.us - New generation of HTML5 Web Application Framework

Introduction and Thesis Introduction - …...1 Introduction and Thesis Introduction: The introduction relates the topic to the main point of the essay. The introduction is composed

1. INTRODUCTION INTRODUCTION - Deusto

Pizza party - Présentation de famo.us