PhoneGap + AngularJS + Topcoat

Workshop

Kruy Vanna / @kruyvanna

Cordova/PhoneGap

Cordova/PhoneGap

  • Bringing native features to the JS world
  • Cross platform (recently: +Chrome App)

AngularJS

HTML enhanced for App

Trends

Some features of AngularJS in action

Data Binding

							



	Hello {{name}}

Hello {{name}}

Controller

							
function Controller1( $scope ){
	$scope.name = "1";
}

function Controller2( $scope ){
	$scope.name = "2";
}
							
						
							


	
{{name}}
 // "1"





	
{{name}}
 // "2"

Form Validation

							


	
	Name is required

Name is required

Other features

  • Directives
  • Filters
  • Dependency Injection
  • Localization

Topcoat

Goal

  • Mobile First
  • Performance matters
  • 0% JS

Components

Now workshop time!

What we will create

A Todo App

Tool we will use

Monaca

Let's start with this Template

https://github.com/kruyvanna/todo

The complete source code

https://github.com/kruyvanna/Todo_Complete

Other factors to make your App successful

  • fastclick
  • -webkit-tap-highlight-color: rgba(0,0,0,0);
  • -webkit-user-select: none;
  • -webkit-overflow-scrolling: touch;
  • Page management

Onsen UI

https://github.com/OnsenUI/OnsenUI
http://docs.monaca.mobi/onsen/

Wrapup

  • PhoneGap
  • AngularJS
  • Topcoat

THE END