Sencha Touch el framework de aplicaciones móviles HTML5

El desarrollo de una aplicación móvil requiere que se tomen muchas decisiones antes de que incluso se escriba la primera línea de código. Por ejemplo, ¿debería ir con una aplicación web o una aplicación nativa? Si es así, ¿debería utilizar un marco? No hay una respuesta incorrecta a ninguna de estas preguntas, depende de la situación. Hoy vamos a hablar sobre una solución específica a estas preguntas: Sencha Touch..

Que es sencha touch?

Desde su página web:

Sencha Touch le permite a sus aplicaciones web verse y sentirse como aplicaciones nativas. Hermosos componentes de la interfaz de usuario y una rica gestión de datos, todos basados ​​en los últimos estándares web HTML5 y CSS3 y listos para dispositivos Android y Apple iOS. Manténgalos en la web o envuélvalos para su distribución en tiendas de aplicaciones móviles.

De los creadores de ExtJS, la gente recientemente nombrada por Sencha ha creado una vez más un marco de JavaScript realmente poderoso. Puedes ver más sobre el marco aquí. Sencha touch puede replicar casi todas las funciones nativas de la interfaz de usuario perfectamente. En este momento, Sencha Touch es probablemente uno de los marcos de aplicaciones web para dispositivos móviles más poderosos que existen y el más adecuado para manejar aplicaciones web complejas que necesitan replicar una aplicación nativa..

Dicho esto, todavía hay algunos inconvenientes, como todo. Para empezar, mientras esto se está escribiendo, todavía está en BETA. De las pruebas personales, no he encontrado ningún error todavía. También significa que todavía están empaquetando muchas características para el marco. Lo que en realidad es una buena noticia porque este marco ya está increíblemente repleto de características, pero aún puede esperar cosas como la compatibilidad con la cámara en el futuro. Pero el acceso a funciones del dispositivo como esta solo es posible si lo envuelve en PhoneGap, otro marco que permite que las aplicaciones móviles sean aplicaciones nativas..

Esto trae a colación otro punto importante. ¿Un marco de aplicación móvil como Sencha Touch es incluso apropiado para mi proyecto? La respuesta a esa pregunta es difícil. Hay ventajas y desventajas en ambas soluciones y estamos asumiendo que estamos usando Sencha Touch como una aplicación web estrictamente:

Ahora debe decidir si Sencha Touch es el marco de aplicación web adecuado para su proyecto:

Sencha Touch de un vistazo

  • Curva de aprendizaje más alta que la mayoría de los otros marcos web
  • El mejor marco de aplicaciones web para aplicaciones web de alto nivel.
  • Se adapta fácilmente a diferentes resoluciones para lograr la máxima compatibilidad con diferentes iPhones, iPad y los diferentes teléfonos con Android.
  • Dos temas para iOS y Android.
  • HTML5 y CSS3 permiten una mayor flexibilidad
  • Gran soporte para animaciones y eventos táctiles mejorados.

Si todo esto suena bien para tu proyecto, entonces adelante y descárgalo. Si parece un poco excesivo, es posible que desee ver algo como jQTouch (busque un tutorial sobre esto pronto).

Descargando Sencha Touch

Para descargar una copia de Sencha Touch, simplemente vaya a su sitio web y haga clic en Descargar ahora.

Abra la carpeta sencha touch y haga clic en ejemplos. Luego haga clic en index.html (dentro de la carpeta de ejemplos)

Examine los ejemplos y explore las diferentes funciones de las diferentes aplicaciones. La aplicación más valiosa para aprender las verdaderas habilidades de este marco es la aplicación Kitchen Sink. Eso es lo que estaremos viendo:

Fregadero de cocina

Explore la aplicación y vea la fuente de algunas de las cosas para comprender el concepto de Sencha Touch.

Interfaz de usuario

Si hace clic en la Interfaz del usuario a la izquierda, se le presenta un menú nuevo, muy animado, con elementos específicos de la interfaz de usuario. Aunque todavía no parece que tengan una interfaz de flujo de cobertura, estoy seguro de que es algo que finalmente veremos. Como pueden ver, tienen todos los elementos esenciales cuidados. Veamos el código fuente de las pestañas para tener una idea del nivel de complejidad de la creación de un elemento básico de la interfaz de usuario:

 demos.Tabs = new Ext.TabPanel (sortable: true, // Mantenga presionado para ordenar los elementos: [title: 'Tab 1', html: 'Las pestañas de arriba también se pueden ordenar.
(mantenga pulsado) ', cls:' card card5 ', title:' Tab 2 ', html:' Tab 2 ', cls:' card card4 ', title:' Tab 3 ', html:' Tab 3 ', cls:' card card3 ']);

Como puede ver, es la forma familiar de hacer las cosas de ExtJS. Usted crea un nuevo componente, establece el valor de ordenable y luego ingresa la información necesaria. En este caso, el título de la pestaña, el contenido de la pestaña y una clase identificable. Esta poderosa simplicidad es un testimonio del poder de este marco..

Animaciones

Estos son incluso más fáciles. Para animar un nuevo panel en el proyecto, esto es todo lo que realmente necesita:

 demos.Animations.slide = new Ext.Panel (html: 'Las diapositivas se pueden usar en tándem con dirección: "arriba / abajo / izquierda / derecha".', cls:' card card2 ');

La parte de la diapositiva es lo que determina la transición que utiliza. Puede ver el Fregadero de la cocina para ver más ejemplos como pop, flip, cube y fade.

Te animo a que juegues un poco más con Kitchen Sink y asegúrate de analizar el código fuente en busca de cualquier cosa que te interese. Como esto todavía está en BETA, casi no hay documentación, algo ExtJS (ahora Sencha) es un poco notorio para.

Envolver

Ahora que tiene un poco más de conocimiento sobre Sencha Touch, espero que pueda agregarlo a su arsenal de herramientas de aplicaciones móviles. Al igual que con cualquier otra industria de desarrollo, debe elegir las herramientas adecuadas para el trabajo. Sencha Touch puede ser la herramienta adecuada si está creando una aplicación móvil de alto nivel a través de la web. Solo asegúrese de que sea el adecuado para su proyecto antes de continuar. Eso es todo por ahora, déjame saber lo que piensas sobre Sencha Touch y otros marcos en los comentarios!