{"id":2091,"date":"2020-02-19T12:08:33","date_gmt":"2020-02-19T11:08:33","guid":{"rendered":"https:\/\/strattonapps.com\/?p=2091"},"modified":"2020-02-27T19:10:50","modified_gmt":"2020-02-27T18:10:50","slug":"vuejs-js-future-of-web","status":"publish","type":"post","link":"https:\/\/strattonapps.com\/es\/web-development\/vuejs\/vuejs-js-future-of-web\/","title":{"rendered":"Vue.js, la potente herramienta de desarrollo front-end #1"},"content":{"rendered":"<p>\u00bfQu\u00e9 es vue.js seg\u00fan sus fundadores?<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><a class=\"rank-math-link rank-math-link rank-math-link\" href=\"https:\/\/vuejs.org\" target=\"_blank\" rel=\"noopener\">vuejs.org<\/a><\/p><cite>Vue (pronunciado \/ vju\u02d0 \/, como&nbsp;<strong>ver<\/strong>) es un&nbsp;<strong>marco progresivo<\/strong>&nbsp;para construir interfaces de usuario. A diferencia de otros marcos monol\u00edticos, Vue est\u00e1 dise\u00f1ado desde cero para ser gradualmente adoptable. La biblioteca principal se centra solo en la capa de vista y es f\u00e1cil de recoger e integrar con otras bibliotecas o proyectos existentes. Por otro lado, Vue tambi\u00e9n es perfectamente capaz de impulsar aplicaciones sofisticadas de una sola p\u00e1gina cuando se usa en combinaci\u00f3n con&nbsp;<a href=\"https:\/\/vuejs.org\/v2\/guide\/single-file-components.html\" target=\"_blank\" rel=\"noopener\">herramientas modernas<\/a>&nbsp;y&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/vuejs\/awesome-vue#components--libraries\" target=\"_blank\">bibliotecas de apoyo<\/a>.<\/cite><\/blockquote>\n\n\n\n<p>Podemos afirmar que VueJS es un marco de JavaScript avanzado con un c\u00f3digo fuente abierto para el desarrollo de una interfaz de usuario. Es uno de los marcos m\u00e1s populares para simplificar el desarrollo web. VueJS funciona principalmente con la capa de presentaci\u00f3n. Se puede integrar f\u00e1cilmente en grandes proyectos para el desarrollo frontend.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Historia de VueJS<\/h2>\n\n\n\n<p>Vue fue creado por Evan You despu\u00e9s de trabajar para <a href=\"https:\/\/en.wikipedia.org\/wiki\/Google\" target=\"_blank\" rel=\"noopener\">Google<\/a> utilizando <a href=\"https:\/\/en.wikipedia.org\/wiki\/AngularJS\" target=\"_blank\" rel=\"noopener\">AngularJS<\/a>  en una serie de proyectos. M\u00e1s tarde resumi\u00f3 su proceso de pensamiento: &quot;Me imagin\u00e9, \u00bfqu\u00e9 pasar\u00eda si pudiera extraer la parte que realmente me gusta de Angular y construir algo realmente liviano&quot;. El primer c\u00f3digo fuente comprometido con el proyecto fue fechado en julio de 2013, y Vue se lanz\u00f3 por primera vez el siguiente febrero, en 2014. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ecosistema VueJS<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Ecosistema<\/h2>\n\n\n\n<p>La biblioteca central viene con herramientas y bibliotecas desarrolladas tanto por el equipo central como por los contribuyentes. \n<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Herramientas oficiales<\/h3>\n\n\n\n<ul><li><strong>Devtools<\/strong> - Extensi\u00f3n de devtools del navegador para depurar aplicaciones Vue.js<\/li><li><strong>Vue CLI<\/strong> - Herramientas est\u00e1ndar para el r\u00e1pido desarrollo de Vue.js<\/li><li><strong>Vue Loader<\/strong> - un cargador de paquetes web que permite la escritura de componentes Vue en un formato llamado Componentes de un solo archivo (SFC)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Bibliotecas oficiales<\/h3>\n\n\n\n<ul><li><strong>Vue Router<\/strong> - El enrutador oficial para Vue.js<\/li><li><strong>Vuex<\/strong> - Gesti\u00f3n de estado centralizada inspirada en Flux para Vue.js<\/li><li><strong>Vue Server Renderer<\/strong> - Representaci\u00f3n del lado del servidor para Vue.js<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPor qu\u00e9 usar Vue.js?<\/h2>\n\n\n\n<p>La modularizaci\u00f3n de la biblioteca utilizando un marco es com\u00fan en el desarrollo frontend. Tanto React como Angular tienen modularizaci\u00f3n. Pero lo que diferencia a Vue.js de otras alternativas es su &quot;alto desacoplamiento&quot;, lo f\u00e1cil que es ampliar las funcionalidades y lo bien que funcionan todas las piezas una vez que se incluyen m\u00e1s m\u00f3dulos.<\/p>\n\n\n\n<p>Por ejemplo, si queremos organizar y renderizar peque\u00f1os componentes visuales, todo lo que necesitamos es la biblioteca &#039;core&#039; de Vue.js; No es necesario incluir bibliotecas adicionales. A medida que la aplicaci\u00f3n crece, tenemos bibliotecas para administrar rutas como &#039;vue-router&#039;, bibliotecas para administrar el estado global como &#039;vuex&#039; o bibliotecas para crear aplicaciones web receptivas como &#039;bootstrap-vue&#039;. Adem\u00e1s, si nuestra aplicaci\u00f3n necesita ser optimizada o necesita un buen SEO, podemos incluir la biblioteca &#039;vue-server-rendering&#039;. En la siguiente figura, podemos ver c\u00f3mo se incluyen progresivamente las bibliotecas que acabamos de mencionar, desde un peque\u00f1o SPA hasta aplicaciones de varias p\u00e1ginas (MPA).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"589\" height=\"433\" src=\"https:\/\/strattonapps.com\/wp-content\/uploads\/2020\/02\/vuespa.png\" alt=\"Vue.js functionality\" class=\"wp-image-1819\" srcset=\"https:\/\/strattonapps.com\/wp-content\/uploads\/2020\/02\/vuespa.png 589w, https:\/\/strattonapps.com\/wp-content\/uploads\/2020\/02\/vuespa-300x221.png 300w\" sizes=\"(max-width: 589px) 100vw, 589px\" \/><\/figure><\/div>\n\n\n\n<p>El sistema de componentes de Vue.js es reactivo, lo que significa que Vue.js sabe c\u00f3mo comunicarse a trav\u00e9s de eventos asincr\u00f3nicos; por ejemplo, un componente hijo puede comunicarse con su componente padre a trav\u00e9s de eventos. Con Vue.js no hay fricci\u00f3n con otras bibliotecas o recursos, en otras palabras, podemos usar la herramienta con la que nos sentimos m\u00e1s c\u00f3modos. Por ejemplo, podemos escribir solo HTML y JavaScript o, si queremos, podemos agregar CSS, JSX o TypeScript.<\/p>\n\n\n\n<p>Vue.js tiene una l\u00ednea de comando especial (CLI) creada en el Nodo JS. Esta herramienta nos permite comenzar un proyecto usando una plantilla (o plantilla base). Adem\u00e1s, el equipo de desarrollo de Vue.js mantiene una extensi\u00f3n de Chrome que nos permite ver c\u00f3mo se representa nuestro \u00e1rbol de componentes, c\u00f3mo se inician y graban los eventos, c\u00f3mo se guarda el estado interno de cada componente y c\u00f3mo se guarda el estado global del componente se est\u00e1 comportando<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Componentes VueJS<\/h2>\n\n\n\n<p>Los componentes Vue se usan para extender los b\u00e1sicos <a href=\"https:\/\/en.wikipedia.org\/wiki\/HTML_element\" target=\"_blank\" rel=\"noopener\">Elementos HTML<\/a> para encapsular el c\u00f3digo JavaScript reutilizable. En un nivel alto, los componentes son elementos personalizados a los que el compilador de Vue asocia el comportamiento. En Vue, un componente es esencialmente una instancia de Vue con opciones predefinidas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQui\u00e9n est\u00e1 usando Vue.js?<\/h2>\n\n\n\n<p>M\u00e1s de 700 empresas est\u00e1n utilizando Vue.js. Algunos de los m\u00e1s importantes son: Xiaomi, Alibaba y Gitlab. La lista completa est\u00e1 disponible en&nbsp;<a href=\"https:\/\/stackshare.io\/vue-js\/in-stacks#\/\" target=\"_blank\" rel=\"noopener\">https:\/\/stackshare.io\/vue-js\/in-stacks<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 es vue.js seg\u00fan sus fundadores? vuejs.org Vue (pronunciado \/ vju\u02d0 \/, como vista) es un marco progresivo para construir interfaces de usuario. A diferencia de otros marcos monol\u00edticos, Vue est\u00e1 dise\u00f1ado desde cero para ser adoptable de forma incremental. La biblioteca principal se centra solo en la capa de vista y es f\u00e1cil de recoger e integrar con otras bibliotecas o ... <a title=\"Vue.js, la potente herramienta de desarrollo front-end #1\" class=\"read-more\" href=\"https:\/\/strattonapps.com\/es\/web-development\/vuejs\/vuejs-js-future-of-web\/\" aria-label=\"M\u00e1s en Vue.js, la potente herramienta de desarrollo front-end de #1\">Leer m\u00e1s<\/a><\/p>","protected":false},"author":3,"featured_media":1540,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21,16],"tags":[31,26,30],"_links":{"self":[{"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/posts\/2091"}],"collection":[{"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/comments?post=2091"}],"version-history":[{"count":6,"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/posts\/2091\/revisions"}],"predecessor-version":[{"id":2125,"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/posts\/2091\/revisions\/2125"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/media\/1540"}],"wp:attachment":[{"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/media?parent=2091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/categories?post=2091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/tags?post=2091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}