DEV Community: Rodrigo Ahumada

Vue al rescate de AngularJS apps

Rodrigo Ahumada — Tue, 22 Feb 2022 16:06:11 +0000

Así es, aún existen muchas aplicaciones desarrolladas en AngularJS incluso cuando a finales del año 2021 se anunciara el fin del soporte a su última versión, de hecho se anuncio que el equipo de XLTS.dev mantendrá un Fork de la última versión de angularJS para casos puntuales. Por defecto la única forma de migrar "oficialmente" vamos a decirlo así, es siguiendo la documentación que ha facilitado angular implementando algunas librerías.

¿Porqué Vue?

Vue ofrece una manera natural a mi parecer de migrar componentes de angularJS a componentes Vue, ya que poseen algunas similitudes en sus características que lo hacen compatibles de cierta manera, por ejemplo la sintaxis de templates y modelo reactivo.

Esto permite que la migración se torne menos compleja para el equipo, y además se puede continuar el desarrollo de nuevas funcionalidades sin afectar tiempos, al mismo tiempo que se lleva a cabo la migración de componentes.

Ahora quiero mostrarles un ejemplo básico de como sería...

Configurando AngularJS y Vue

Snippet de Vue

se debe incluir Vue desde tu carpeta de librerías o un CDN

<script url=".../vue.js"></script>

Crear una instancia de Vue

Crearemos una instancia de vue en un controller de angularJS, asociado a una vista o al controller principal.

((module) => {
  const vm = this;

  vm.$onInit = () => {
    vm.ngText = 'Hello World!';
    vm.vueInstance();
  }
  vm.vueInstance = () => {
    new Vue({
      el: document.getElementById('vue-app'),
      data:{
        someText: vm.ngText
      }
    });
  };
})(angular.module('app'))

Creamos un componente de Vue

Este componente lo declaramos en una constante solo para efectos de pruebas unitarias.

const MyVueComponent = Vue.component('MyVueComponent', {
  props: {
    text: {
      type: String
    }
  },
  template:`<div>{{ text }}</div>`
});

Finalmente, en el template de HTML ng-non-bindable hará que todo ocurra!, esta directiva le dice a angularJS no compilar o vincular en el elemento actual del DOM, en nuestro caso la instancia de Vue.

<main ng-controller="MainCtrl as vm">
  <div id="vue-app" ng-non-bindable>
    <MyVueComponent :text="someText" />
  </div>
</main>

Ahora puedes comenzar a migrar y continuar tu desarrollo sin afectar la entrega de nuevas funcionalidades.

Puedes revisar un ejemplo completo en este repositorio, en el cual se incluye un store con Vuex.

Post original

rholo / ng-vue-migration

Basic sample to migrate from AngularJS to Vue without modules

Migrate AngularJS app with Vue/Vuex

this is an example to migrate your legacy project from angularjs to Vue including Vuex and i18n features,

NOTE: this project is not using javascript modules

this migration is from angularJS inside to create new features using Vue..

even you can add Eslint + Prettier config for better practices and clean code.

View on GitHub

Saving an AngularJS app with Vue

Rodrigo Ahumada — Fri, 18 Feb 2022 05:49:04 +0000

yes, there are still applications developed with AngularJS even though its LTS version was discontinued at the end of 2021, in fact from the beginning of the year 2022 the independent team in XLTS.dev will maintain a fork of the latest version of AngularJS. by default the only way to migrate your web app is using some libraries available by the Angular team,

Why Vue?

Vue offer a natural way to migrate your ng components to Vue components because there are some features that will speed up the whole migration process of your app, for example templating syntax and reactive model.

This allows migration to be less complex for the team and allows them to still focus on new features and migration at the same time.

let me show you a basic example to make this...

Setting up AngularJS with Vue

Add Vue snippet

include Vue/Vuex snippet from your favorite CDN

<script url=".../vue.js"></script>
<script url=".../vuex.js"></script>

Creating Vue instance

we create a Vue instance in main or some view controller!

((module) => {
  const vm = this;

  vm.$onInit = () => {
    vm.ngText = 'Hello World!';
    vm.vueInstance();
  }
  vm.vueInstance = () => {
    new Vue({
      el: document.getElementById('vue-app'),
      data:{
        someText: vm.ngText
      }
    });
  };
})(angular.module('app'))

Create a simple Vue component for this example

we declare this component in constant in case we need to run unit tests

const MyVueComponent = Vue.component('MyVueComponent', {
  computed: {
    text: {
      type: String
    }
  },
  template:`<div>{{ text }}</div>`
});

Finally inside HTML template ng-non-bindable does the trick, this directive tells AngularJS not to compile or bind the contents of the current DOM element, in our case a Vue instance

<main ng-controller="MainCtrl as vm">
  <div id="vue-app" ng-non-bindable>
    <MyVueComponent :text="someText" />
  </div>
</main>

now you can migrate and deliver new features at the same time with Vue.
you can check a full example using Vue and incorporate Vuex.

rholo / ng-vue-migration

Basic sample to migrate from AngularJS to Vue without modules

Migrate AngularJS app with Vue/Vuex

this is an example to migrate your legacy project from angularjs to Vue including Vuex and i18n features,

NOTE: this project is not using javascript modules

this migration is from angularJS inside to create new features using Vue..

even you can add Eslint + Prettier config for better practices and clean code.

View on GitHub

Lo-fi for (DEV) life

Rodrigo Ahumada — Fri, 18 Feb 2022 05:21:14 +0000

this is not a post of some new plugin or anything like that, it is rather a valuable ally that will allow or rather help you to stay relaxed and focused in those moments of study or work, especially in the case of developers who need to maintain a high level concentration in some cases.

lo-fi as a concept I think many must have already heard about, it has become very popular in these times especially in this pandemic, there are already several channels on Youtube or Spotify designed entirely in this concept, but I do not want to go into too much detail, I want to share some of the playlists that I consider essential and some alternatives that you can discover, and if you have some others are all welcome to share.

Code Radio

The first one is Code Radio from FreeCodeCamp which you can listen to 24 hours a day.

Lofi Girl

secondly I will point out one of the most popular or the most popular on YouTube! Lofi Girl which already has more than 10 million subscribers and you can find it on different platforms.

The following playlists are more of personal taste which I want to share.

Lofi Brasil

Lofi Brasil mixes part of the Brazilian culture in this excellent playlist. enjoy it.

Hola Beats Lofi

Another very interesting playlist is Hola Beats Lofi which besides being copyright free music, it is available on several platforms.

hope you enjoy it and feel free to share your playlist.