{"id":1207,"date":"2017-12-15T18:00:23","date_gmt":"2017-12-15T18:00:23","guid":{"rendered":"http:\/\/maquetando.com\/?p=1207"},"modified":"2017-12-15T19:16:49","modified_gmt":"2017-12-15T19:16:49","slug":"3-frameworks-para-crear-aplicaciones-hibridas-y-progresivas-con-vuejs","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/3-frameworks-para-crear-aplicaciones-hibridas-y-progresivas-con-vuejs\/","title":{"rendered":"3 Frameworks para crear aplicaciones hibridas y progresivas con VUEJS"},"content":{"rendered":"<p>Las aplicaciones m\u00f3viles h\u00edbridas y las aplicaciones web progresivas son cada vez m\u00e1s comunes. Hay una serie de proyectos que proporcionan un conjunto pre-fabricado de componentes y APIs de interfaz de usuario para hacer la interacci\u00f3n con cualquier\u00a0 dispositivo m\u00f3vil m\u00e1s limpia y accesible.<\/p>\n<p>Te presento 3 herramientas con las que podemos integrar VUEJS , trate de restringir la lista est\u00e1 restringida a\u00a0 frameworks\u00a0 que proporcionan una experiencia completa para el desarrollo de apps.<\/p>\n<p>Por el momento no incluyo\u00a0 NativeScript y Weex porque creo que estan en alfa para usarlos en algo serio, pero espero poder a\u00f1adirlos pronto.<\/p>\n<h2><a href=\"https:\/\/onsen.io\/vue\/\">Onsen UI<\/a><\/h2>\n<h2><a href=\"https:\/\/onsen.io\/vue\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1209\" src=\"http:\/\/maquetando.com\/wp-content\/uploads\/2017\/12\/onsen.jpg\" alt=\"\" width=\"1186\" height=\"754\" srcset=\"https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/onsen.jpg 1186w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/onsen-600x381.jpg 600w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/onsen-300x191.jpg 300w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/onsen-768x488.jpg 768w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/onsen-1024x651.jpg 1024w\" sizes=\"(max-width: 1186px) 100vw, 1186px\" \/><\/a><\/h2>\n<p>Onsen UI es un potente kit de interfaz de usuario. Su principal objetivo es proporcionar componentes perfectamente nativos y de acci\u00f3n nativa. Como resultado, incluye animaciones, gestos y dise\u00f1os espec\u00edficos de la plataforma a desarrollar.<\/p>\n<p>Onsen UI puede ser utilizado con Angular 1, Angular 2+, React y, por supuesto, Vue 2..<\/p>\n<p>Onsen tambi\u00e9n intenta hacer que el tama\u00f1o de la aplicaci\u00f3n sea lo m\u00e1s peque\u00f1o posible, lo que puede mejorar\u00a0 bastante la\u00a0 velocidad cuando se trata de un dispositivo m\u00f3vil lento o una conexi\u00f3n lenta.<\/p>\n<p>En comparaci\u00f3n con Quasar (mas abajo), los componentes de Onsen tienen un aspecto mucho m\u00e1s nativo , pero en este momento la colecci\u00f3n de componentes es m\u00e1s peque\u00f1a.<\/p>\n<p>Onsen tambi\u00e9n proporciona un conjunto de tutoriales interactivos que pueden hacer mucho m\u00e1s f\u00e1cil de entender y depurar cada componente. Como la mayor\u00eda de los frameworks revisados en este art\u00edculo, Onsen requiere el uso de Cordova para empaquetar tu c\u00f3digo como una aplicaci\u00f3n m\u00f3vil h\u00edbrida. La empresa detr\u00e1s de Onsen proporciona un\u00a0 CLI propio con algunas funciones extras que mejoran el trabajo de desarrollo.<\/p>\n<p><strong>Conclusi\u00f3n :<\/strong><\/p>\n<p>Onsen es una excelente opci\u00f3n, ya que parece tener una comunidad activa, un ciclo de lanzamiento frecuente y una compa\u00f1\u00eda detr\u00e1s de ella. De las diversas opciones de este art\u00edculo, si le preocupa la apariencia nativa, el soporte a largo plazo, la fiabilidad o las herramientas, Onsen UI es probablemente para usted. Sin embargo, es posible que tenga que sacrificar algunos componentes, como los fechadores.<\/p>\n<p>ENLACE [ <a href=\"https:\/\/onsen.io\/vue\/\">ONSEN UI<\/a> ]<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2><a href=\"http:\/\/quasar-framework.org\/\">Quasar Framework<\/a><\/h2>\n<p><a href=\"http:\/\/quasar-framework.org\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1210\" src=\"http:\/\/maquetando.com\/wp-content\/uploads\/2017\/12\/quasar.jpg\" alt=\"\" width=\"1186\" height=\"754\" srcset=\"https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/quasar.jpg 1186w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/quasar-600x381.jpg 600w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/quasar-300x191.jpg 300w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/quasar-768x488.jpg 768w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/quasar-1024x651.jpg 1024w\" sizes=\"(max-width: 1186px) 100vw, 1186px\" \/><\/a><\/p>\n<p>Al igual que Onsen, Quasar Framework tambi\u00e9n proporciona una herramienta CLI para acelerar la configuraci\u00f3n y el desarrollo iniciales. Quasar es el \u00fanico framework\u00a0 en esta lista que se puede integrar\u00a0 \u00a0a Electr\u00f3nJs , proporcionando soporte tanto para \u00e9l como para C\u00f3rdoba , as\u00ed que si quisi\u00e9ramos correr nuestra app como una aplicaci\u00f3n para computadoras de escritorio Quasar seria una interesante opci\u00f3n.<\/p>\n<p>Quasar proporciona una excelente documentaci\u00f3n que cubre una amplia variedad de temas en los que se puede encontrar mientras desarrolla su aplicaci\u00f3n, as\u00ed como una variedad estelar de componentes y una excelente documentaci\u00f3n para todos ellos.<\/p>\n<p>El \u00e1rea m\u00e1s grande donde Quasar sufre\u00a0 es el conjunto de temas por defecto. Ni Material ni los temas de iOS parecen bastante&#8230; correctos :P,\u00a0 pero tampoco es como para asustarte pues con un poco de c\u00f3digo CSS lo solucionamos.<\/p>\n<p><strong>Conclusi\u00f3n :<\/strong><\/p>\n<p>Quasar es \u00fanico en el n\u00famero de plataformas de destino soportadas, y proporciona una amplia documentaci\u00f3n y soporte. Sin embargo, los temas incorporados no son exactamente exactos a las especificaciones, por lo que es posible que tenga que trabajar en ellos si planea lanzar una aplicaci\u00f3n de nivel profesional.<\/p>\n<p>Para los proyectos de hobby, sin embargo, cuando estas preocupaciones son menos relevantes, Quasar parece ser una gran opci\u00f3n.<\/p>\n<p>ENLACE [ <a href=\"http:\/\/quasar-framework.org\/\">QUASAR FRAMEWORK<\/a> ]<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2><a href=\"https:\/\/framework7.io\/\">Framework 7<\/a><\/h2>\n<p><a href=\"https:\/\/framework7.io\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1211\" src=\"http:\/\/maquetando.com\/wp-content\/uploads\/2017\/12\/f7.jpg\" alt=\"\" width=\"1186\" height=\"754\" srcset=\"https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/f7.jpg 1186w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/f7-600x381.jpg 600w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/f7-300x191.jpg 300w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/f7-768x488.jpg 768w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/12\/f7-1024x651.jpg 1024w\" sizes=\"(max-width: 1186px) 100vw, 1186px\" \/><\/a><\/p>\n<p>Hace unos a\u00f1os\u00a0 que <a href=\"http:\/\/maquetando.com\/framework-7\">escrib\u00ed una entrada<\/a> sobre este gran framework que sin ser conocido en esos d\u00edas me ayudo bastante a salir de un \u00abproblema\u00bb para realizar una app hibrida en tan solo 15 dias, si 15 d\u00edas y es que mis conocimientos de como desarrollar\u00a0 aplicaciones en ese entonces era\u00a0 casi nulo.<\/p>\n<p>Framework 7\u00a0 originalmente fue desarrollado solo para iOS en mente, pero debido a su popularidad Framework 7 se ha expandido desde entonces a Material Design.<\/p>\n<p>Los temas para ambas plataformas est\u00e1n excelentemente dise\u00f1ados, combin\u00e1ndose bastante bien con los controles nativos. Sin embargo, las animaciones y los gestos se sienten un poco raros, y no estoy seguro de por qu\u00e9. Como ventaja adicional, Framework 7 est\u00e1 dise\u00f1ado para ser extensible , aunque enfocado mas a VainillaJs que a VujeJS<\/p>\n<p>Contiene una selecci\u00f3n\u00a0 grande de componentes, y bastante documentaci\u00f3n para acompa\u00f1arlos. Sin embargo, debido a la excelente emulaci\u00f3n de\u00a0 su dise\u00f1o, quiz\u00e1 costara un poco de trabajo si necesitamos algo\u00a0 mas personalizado fuera de Material e IOS.<\/p>\n<p><strong>Conclusi\u00f3n :<\/strong><\/p>\n<p>Framework 7\u00a0 que proporciona casi todo lo que necesita para una aplicaci\u00f3n web h\u00edbrida, sin embargo\u00a0 Framework 7 prefiere utilizar sus propias bibliotecas\u00a0 \u00a0de\u00a0 enrutamiento y DOM pero\u00a0 si no tienes problema con eso , adelante\u00a0 .<\/p>\n<p>ENLACE\u00a0 [ <a href=\"https:\/\/framework7.io\/\">FRAMEWORK 7<\/a> ]<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Las aplicaciones m\u00f3viles h\u00edbridas y las aplicaciones web progresivas son cada vez m\u00e1s comunes. Hay&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1213,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,14,118,136],"tags":[133,135,134],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1207"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=1207"}],"version-history":[{"count":9,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1207\/revisions"}],"predecessor-version":[{"id":1220,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1207\/revisions\/1220"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media\/1213"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=1207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=1207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=1207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}