Skip to content

Instantly share code, notes, and snippets.

@jpkontreras
Created September 23, 2017 20:40
Show Gist options
  • Save jpkontreras/bc04ad5c0c5f030e71bf6fff9940ae19 to your computer and use it in GitHub Desktop.
Save jpkontreras/bc04ad5c0c5f030e71bf6fff9940ae19 to your computer and use it in GitHub Desktop.
-----------------------------------------
ReactiveX lo metes en el stack que quieras.
Lo uso en React sin ningún problema para manejar estado en la aplicación o generar comportamientos temporales complejos.
Bindings estilo AngularJS, que son los que tiene Vue, al final del día dan más dolores de cabeza que soluciones.
Algo que cambias en un input en un template, puede influir en otro elemento dom del mismo template,
y a la vez eso puede estar siendo modificado por métodos.
En resumen, pierdes toda noción de quién causó qué cosa.
Si la información solo fluye aguas abajo (unidirectional data flow),
esas cosas no suceden, porque siempre sabes que hay un único lugar por el cual viene la información.
En Vue puedes hacer eso, pero se te complica bastante el desarrollo.
-----------------------------------------
Eso no pasa y en caso de que pasara deberias como yo tratar de dejar un
link de informacion u/o un link de reproduccion en jsfiddle o algo asi
como metodo de prueba.
Solamente por que tu digas que :
"Puede influir en otro elemento dom del mismo template, y a la vez eso puede estar siendo modificado por métodos."
Estas basando tu caso en pura especulacion.
Te aliento a dejar pruebas de lo que dices, aunque sea por una red social
Aparte quizas no sepas pero para debuggear dev builds existe algo llamado MapFile
-----------------------------------------
Colgándome de lo anterior, Vue ya es un ecosistema en que la solución a todos los problemas viene dada por una
librería oficial y una forma oficial de hacer las cosas perfectamente bien documentada.
Quieres hacerlo distinto? Ojalá que lo encuentres en StackOverflow o seas un ninja del framework.
Que puedas usar Redux no quiere decir que la arquitectura de algo grande o un proyecto real
te resulte expedito en el proceso de desarrollo.
Eso aplica en general a cada uno de tus "eso que tiene React también se puede hacer en Vue".
-----------------------------------------
- "Vue ya es un ecosistema en que la solución a todos los problemas" :
Equivocado. El ecosistema es : Vue-core, Vue-Router, Vuex -> Creado por el mismo team
No trae todo resuelto y cabe aclarar que los ultimos dos son opcionales.
- "Quieres hacerlo distinto? Ojalá que lo encuentres en StackOverflow o seas un ninja del framework"
Vue sigue el web component spec
## https://www.webcomponents.org/specs
Si eso no es suficiente para ti , entonces debes buscar otras
soluciones.
El framework es en su punto algo "opinionated", solo en como se manejan los datos en el core.
- "Eso aplica en general a cada uno de tus "eso que tiene React también se puede hacer en Vue". "
Nunca dije o tuve la intencion de comparar funcionalidad sino lo que hice fue refutar tus puntos
-----------------------------------------
No entendiste nada sobre a lo que me refiero con scopes.
El hecho de que declares en una llave `data` y luego lo puedas usar sin más como
`this` en los métodos no te hace ruido?
Cómo una variable que declaré en data cambia sin más en mis templates automáticamente?
Parece que las variables que uso en `this` no son las mismas que declaré en data.
Algo raro pasa por debajo. Entonces, si me enfrento a un bug en mi código por culpa de esto,
cómo lo resuelvo si no comprendo qué está pasando por debajo?
Copiar y pegar código de StackOverflow no ayuda mucho, porque no arreglas el problema de fondo.
-----------------------------------------
- "Cómo una variable que declaré en data cambia sin más en mis templates automáticamente?"
Primero que todo no son variables. Es una funcion que retorna un objeto
Cada objeto tiene una llave (key) y un valor de referencia.
Y estos se acceden ? con un "this." indicando la referencia del scope.
Puedes leer sobre como vue sabe que this es cual.
## https://vuejs.org/v2/api/#data
- "Entonces, si me enfrento a un bug en mi código por culpa de esto,
cómo lo resuelvo si no comprendo qué está pasando por debajo?
Copiar y pegar código de StackOverflow no ayuda mucho, porque no arreglas el problema de fondo."
De nuevo para debuggear dev builds existe algo llamado MapFile
-----------------------------------------
Dije en templates, no en el codebase :P. Y no estoy hablando de typescript.
Estoy hablando de cuando tienes que hacer cosas en los templates,
ejemplo: v-on:click (o :click, como sea). Ahí inevitablemente pierdes noción de los tipos de datos,
porque pasan a ser simplemente strings. No hay nada que puedas hacer para remediar eso.
Todos los frameworks modernos se bajan a ES5, no inventaron la rueda con eso. JSX es mejor *no* porque transpila
a JavaScript de un forma muy bien definida, y por lo tanto incluso lo que escribes en atributos es JavaScript puro.
No necesitas ninguna ayudita de template arbitraria.
Con ternarios, &&, ||, .map, .filter resuelves todo lo que necesitas de templating.
-----------------------------------------
- "Dije en templates, no en el codebase"
CITO : " Eso es una opinión, no un hecho. Vue tiene bindings reactivos (a lo buen Angular),
estados mutables (en Vuex y en arquitectura)
y scopes variables que te pueden dejar la grandísima cagada en el CODEBASE si no tienes
la más remota idea de lo que estás haciendo. Lo que es sencillo que ocurra porque como echarlo a andar
es tan sencillo, mucha gente no se da el trabajo de profundizar
en el framework o mucha gente está recién empezando a programar en JavaScript."
- " v-on:click (o :click, como sea). Ahí inevitablemente pierdes noción de los tipos de datos,
porque pasan a ser simplemente strings."
Incorrecto. Basicamente se agrega un eventAddListener al click con el nombre
de la funcion a llamar y los parametros asignados.
Ademas javascript tiene un operador llamado typeof con el cual puedes ver de que
tipo es el parametro ingresado en el metodo
-> return typeof obj.id === null || undefined ? true : false
## https://vuejs.org/v2/guide/events.html#Why-Listeners-in-HTML
- "Todos los frameworks modernos se bajan a ES5, no inventaron la rueda con eso. "
Equivocado nuevamente. Vue se puede utilizar directo con 1 linea en el cdn. No "Baja" por que no debe hacerlo
- "JSX es mejor *no* porque transpila
a JavaScript de un forma muy bien definida, y por lo tanto incluso lo que escribes en atributos es JavaScript puro.
No necesitas ninguna ayudita de template arbitraria.
Con ternarios, &&, ||, .map, .filter resuelves todo lo que necesitas de templating."
Toda la razon. Ese es el enganche de JSX. Pero como digo tambien puedes utilizar JSX en vue. Solo que no es el "dafault"
-----------------------------------------
Entonces, según tu frase de Da Vinci, puedes construir un Ferrari con un palo y un tornillo.
Simplemente, no. El stack determina el costo de desarrollo,
que es el recurso más caro en una empresa tecnológica, y que *SÍ* influye en el éxito de esta.
Los refactorings por mala escalabilidad cuestan mucha plata,
y eso es lo que terminas haciendo en Vue cuando no te piensas muy bien lo que vas a hacer desde un comienzo.
Algo así como 150.000 USD anuales por persona cuesta un desarrollador en SV, por lo bajo.
-----------------------------------------
- "Entonces, según tu frase de Da Vinci, puedes construir un Ferrari con un palo y un tornillo."
De verdad esperaba una respuesta mas decente a la altura de lo que estamos hablando.
No estamos hablando de autos ni de tornillos ni nada fuera de como Vue y React circonvolutan para crear software.
Y si se pudiera construir tan bella obra de la ingenieria como un ferrari con un palo y un tornillo no seria
la mas grande sofisticacion de la que el humano haya presenciado jamas ? . Para que las cosas sean creadas
deben partir de un proceso. Si el proceso convierte un palo y un tornillo (Codigo => Software) en un ferrari debe ser perfeccion.
- "El stack determina el costo de desarrollo, que es el recurso más caro en una empresa tecnológica,"
Toda la razon. Pero el front ? . Seria lo ultimo que listear en los gastos.
- "Los refactorings por mala escalabilidad cuestan mucha plata,
y eso es lo que terminas haciendo en Vue cuando no te piensas muy bien lo que vas a hacer desde un comienzo.
Algo así como 150.000 USD anuales por persona cuesta un desarrollador en SV, por lo bajo"
De nuevo vuelvo a lo mismo. Depende de la calidad de desarrolladores que contraten en tu empresa
O me vas a decir que react es la "Silver Bullet" del front ? . Tambien pueden haber errores en ambos
desarrollos.
No se que te refieres con "SV" y tu no vives en chile parece.
Todos sabemos bien que aca en chile no se ganan nica** "150.000 USD anuales"
El stack de vue sale mas barato que el de react.
## https://www.getonbrd.cl/empleos/tag/vue-js -> 1 Oferta
## https://www.getonbrd.cl/empleos/tag/react -> 24 + Ofertas
Vue no es conocido ni tiene a un gigante que lo avale como facebook. Por eso react es la ultima solucion cierto ?.
Se ve claramente que te has dejado llevar por la manipulacion que estos servicios ponen sobre los desarrolladores.
Tambien cabe decir que vue aun no ha explotado aqui en chile y cuando los Pm o jefes se den cuenta de que es mas barato,
los numeros claramente se invertiran.
-----------------------------------------
Más aún, diste un ejemplo contra más de 10 que te di.
Alibaba patrocina Vue porque el creador de Vue es chino y hay mucha tracción en China
por la cantidad de documentación escrita en Chino, pensada desde el momento 0.
De hecho, gran parte del ecosistema está patrocinada por china y por eso, lo usan empresas chinas en su mayoría.
La tracción monumental se ha debido en buena parte también a empresas orientales.
-----------------------------------------
- "Más aún, diste un ejemplo contra más de 10 que te di. "
No necesito dar mas ya que explica el punto que dije anteriormente
- "Alibaba patrocina Vue porque el creador de Vue es chino y hay mucha tracción en China
por la cantidad de documentación escrita en Chino, pensada desde el momento 0."
Equivocado otra vez . Vue se creo cuando evan trabajaba en google como parte del core de angular
Nunca se penso en chino. Los primeros docs fueron escritos en ingles.
## https://011.vuejs.org/guide/
- " De hecho, gran parte del ecosistema está patrocinada por china y por eso, lo usan empresas chinas en su mayoría.
La tracción monumental se ha debido en buena parte también a empresas orientales."
Tambien puede ser por que en realidad es un buen producto que funciona.
Se nota que los chinos no son tontos como para no leer las clausulas abusivas que en el momento tenia react con su producto.
-----------------------------------------
Demás estás dando un argumento súper vago de que ser grande no es sinónimo de bueno,
y luego das ejemplos de empresas grandes que usan Vue. Eso tampoco prueba que sean buenas,
bajo el mismo argumento. Que una empresa sea grande no quiere decir que sea buena,
sí, pero eso no abre la opción de que sea buena por usar Vue, o que sea mala por usar React.
-----------------------------------------
- "demás estás dando un argumento súper vago de que ser grande no es sinónimo de bueno,
y luego das ejemplos de empresas grandes que usan Vue."
Grandes !== Buenas
Dije que las empresas eran buenas ? No. Asumiste ese dato. Solo comente que empresas grandes
como alibaba y baidu tambien usan Vue. En ningun momento estime el valor de la empresa.
- "Eso tampoco prueba que sean buenas, bajo el mismo argumento.
Que una empresa sea grande no quiere decir que sea buena, sí,
pero eso no abre la opción de que sea buena por usar Vue, o que sea mala por usar React"
Concuerdo y repito lo que dije arriba
-----------------------------
Qué tiene que ver JSX en todo esto? Es solo azúcar sintáctica para `React.createClass` o lo que que le quieras poner.
Es una anotación sencilla para decir "esto código es para renderizar" y no javascript de lógica de negocios.
Sigue siendo exclusivamente JS al final del día. Más aún, que Vue permita usar JSX no quiere decir que sea la forma oficial
de hacerlo por la comunidad. Intenta hacer un proyecto real con JSX y verás la cantidad de problemas con los que te encuentras.
Más aún, si te sales mucho de lo que te proponen en la documentación, se complica todo bastante.
La forma más eficiente de desarrollar en Vue es con los archivos .vue en que tienes el template, el código y el css.
¿Cuál es el precio de eso? Tienes que pelear para configurar ESLint, buena suerte si Prettier te funciona,
Pierdes la capacidad de hacer anotaciones de debugger, y hartas herramientas de tooling.
Harto más fácil de aprender, sí, pero a la hora de pasarlo a un equipo grande, surgen problemas.
-----------------------------
- "Qué tiene que ver JSX en todo esto? Es solo azúcar sintáctica para `React.createClass` o lo que que le quieras poner.
Es una anotación sencilla para decir "esto código es para renderizar" y no javascript de lógica de negocios.
Sigue siendo exclusivamente JS al final del día."
JSX forma parte de react. No Se puede dejar fuera de la discusión. Como asi los template de vue
- " Más aún, que Vue permita usar JSX no quiere decir que sea la forma oficial
de hacerlo por la comunidad. Intenta hacer un proyecto real con JSX y verás la cantidad de problemas con los que te encuentras.
Más aún, si te sales mucho de lo que te proponen en la documentación, se complica todo bastante.
La forma más eficiente de desarrollar en Vue es con los archivos .vue en que tienes el template, el código y el css.
¿Cuál es el precio de eso? Tienes que pelear para configurar ESLint, buena suerte si Prettier te funciona,
Pierdes la capacidad de hacer anotaciones de debugger, y hartas herramientas de tooling.
Harto más fácil de aprender, sí, pero a la hora de pasarlo a un equipo grande, surgen problemas."
Obviamente se pueden mezclar las formas de crear los componentes. Pueden ser ambos, templates u/o render functions => JSX
Vue trae un plugin para tu .babelRC y se encarga de aplicar ESLINT a ambos. Como react cierto ?
## https://github.com/vuejs/eslint-plugin-vue#attention
Prettier debe adecuarse al fw no al reves.
De nuevo. React no es la "Silver Bullet" para los equipos de trabajo. Estos deben saber programar.
-----------------------------
- "¿Por qué sucede eso? Porque hacen mucho voodoo por debajo del framework,
y el programador pierde la noción de lo que sucede. Eso no sucede en React.
Desde el momento 0 tienes que entender cómo funciona o si no programas solo cosas que no funcionan."
-----------------------------
Cual es el "voodoo". Que ponga el this en el context ? Solo eso ?. Si te fijas en pequeñeces pierdes el paisaje.
- "Vue es una LIBRERÍA con un ecosistema asociado, no un FRAMEWORK.
Vuex es otra librería, el router es otra, a pesar de ser oficiales del equipo Vue.
React es una LIBRERÍA con un ecosistema aún más grande asociado.
Estamos comparando soluciones que hacen lo mismo, con enfoques distintos.
Sí son comparables, pues tienes que usar una para solucionar tu problema de frontend complejo."
## https://vuejs.org/ -> The Progressive JavaScript Framework
## https://facebook.github.io/react/ -> A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
## https://medium.com/@_cmdv_/react-is-not-a-framework-e25c28dcd78
Claramente no sabes la diferencia entre una libreria y un framework. Por favor lee este thread en S/O
## https://stackoverflow.com/a/148759
-----------------------------
"Estoy diciendo que es muy complicado escalar Vue, con detalles y la prueba más clara,
que es su nivel de uso en proyectos de gran escala. Y tu bien dices "pero eso que hace React se puede también en Vue",
porque la documentación dice en ejemplos "Hello world" que sí se puede,
o bien das argumentos que no aplican al punto de la discusión.
Más aún, todos tus contra argumentos están archi discutidos en Internet (Medium, por ejemplo).
Me enfrento a Vue y React a diario, ambos con templates en Webpack.
Creo que son frameworks que hacen lo mismo, pero con filosofías radicalmente distintas,
lo que implica arquitecturas completamente distintas, lo que se traduce en $$$, y eso en el éxito de una empresa tecnológica.
Si perteneces a un área de desarrollo pequeña de una empresa, no es crítico.
Si tu producto es completamente web, como las empresas que mencioné,
puede pasar a ser algo crítico en el éxito de la empresa, indistintamente del modelo de negocios."
-----------------------------
- "Estoy diciendo que es muy complicado escalar Vue, con detalles y la prueba más clara,
que es su nivel de uso en proyectos de gran escala. Y tu bien dices "pero eso que hace React se puede también en Vue",
porque la documentación dice en ejemplos "Hello world" que sí se puede,
o bien das argumentos que no aplican al punto de la discusión."
Todo proyecto es complicado de escalar. Muchos mueren en el intento y nisiquiera deberias culparle
a la vista los fracasos en los proyectos. Hay muchos valores a considerar . Logica de negocios, arquitectura, flexibilidad,
buena toma de requerimientos,etc. Por que al final eso es . La vista. EL proceso es a parte
Nuevamente "pero eso que hace React se puede también en Vue"
Nunca dije o tuve la intencion de comparar funcionalidad sino lo que hice fue refutar tus puntos.
Con eso dejo en claro mi punto. Por favor si me vas a etiquetar en otro post tuyo, por lo menos que tenga referencias
externas a lo que hablas. Si pones una chorrera de palabras sin fundamento no me dare el tiempo ni de leer ni contestar.
Saludos
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment