cordova – a.k.a. Phonegap – CSS workarounds

View Github Repository Open presentation in a new window

jota-v

See all presentation from jota-v

cordova – a.k.a. Phonegap – CSS workarounds

0 0

presentation-cordova

Slides for my Apache Cordova's presentation

On Github jota-v / presentation-cordova

cordova

a.k.a. Phonegap

by Juan Vanni / @jota_vanni

Antes de empezar

Pueden ver y/o descargarse la presentación apuntando a 10.10.33.101:8000

La encuentran también en Github: github.com/jota-v/presentation-cordova

Qué es Cordova?

Es un framework que nos permite que apps escritas con tecnologías web (html, css, js) corran en dispositivos móbiles como si fueran nativas.

También mediante una API, nos permite que nuestras web apps tengan acceso a funcionalidades de hardware que desde el browser, en muchas plataformas, no está permitido.

Qué ventaja tenemos sobre nativo?

El código web corre sobre cualquier OS, solamente se necesita un browser. Con un mismo y único código fuente podemos deployar en multiples plataformas.*

*Verdad a medias.

Cómo funciona?

Arquitectura de plugins

Cordova 2 Vs. 3

Registro de plugins

Getting started

Instalar node.js Instalar el SDK de todas las plataformas que querramos soportar. Hay buenas guías de ayuda en la documentación oficial. Instalar módulo npm de cordova. 
npm install -g cordova

CLI basics

  • Para crear un proyecto correr: 
    cordova create hello com.jota-v.hello Hello
  • Para agregar las plataformas que querramos soportar: 
    cordova platform add ios
  • Para instalar plugins: 
    cordova plugin add org.apache.cordova.splashscreen
  • Construir: 
    cordova build
  • Correr en dispositivo:
    cordova run

Into the web

Playground

CSS workarounds

Avoid user selection and native browser menu options on long press in all links. 
						* {
							-webkit-touch-callout: none;
							-webkit-user-select: none;
						}
Avoid a rare color highlight on links and input tap. 
						a,
						input,
						select,
						button {
							-webkit-tap-highlight-color: rgba(0,0,0,0);
						}
Return the posibility to users of selecting text in forms. 
						select,
						input[type="text"]
						input[type="password"]
						input[type="datetime"]
						input[type="datetime-local"]
						input[type="date"]
						input[type="month"]
						input[type="time"]
						input[type="week"]
						input[type="number"]
						input[type="email"]
						input[type="url"]
						input[type="search"]
						input[type="tel"]
						input[type="color"] {
							    -webkit-user-select: auto;
						}

Es MUY importante que todas nuestras animaciones corran lo más cercano a 60fps posible. En mobile hay que ser muy cuidadoso con los atributos que animamos

Atributos baratos animar con buena perf:

  • transforms (translate, rotate, scale, etc)
  • opacity

NUNCA animar (y menos en mobile):

  • height y width
  • posiciones: top, right, bottom, left
  • margins y paddings

JS useful libraries

Lightning fast apps

Es muy importante que nuestras apps se sientan rápidas y responsivas para una óptima experiencia.

Sacar los 300ms de delay de todos los links, inputs y botones!!!

Librería recomendada: FastClick.js

Touch gestures

En una amplicación móvil son muy comunes los gestos touch para la interacción con la UI

Librería recomendada: Hammer.js

Build tasks

Por más que nuestra app no va a buscar sus assets a la web es recomendable igualmente optimizar todos los archivos de imágenes y minificar todos los css y js.

Es útil también correr tareas de compilado de sass, de linteo y hinteo

Librería recomendada: Grunt

UI frameworks

Nos pueden ahorrar mucho trabajo o pueden ser nuestros peores enemigos.

THE END