Muestra las diferencias entre dos versiones de la página.
unidades:01_introduccion:01_introduccion [2014/09/05 20:00] admin |
unidades:01_introduccion:01_introduccion [2014/09/15 18:31] (actual) admin [Disculpas] |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
- | ====== AngularJS ====== | + | ====== 1.1 Introduccion ====== |
- | AngularJS es un framework para JavaScript. Vamos a comparar AngujarJS con otros frameworks para explicar deberíamos aprender AngularJS y no otros frameworks. Concretamente vamos a compararlo con | + | Bienvenido a mi curso sobre AngularJS y servicios REST con Java y Spring. Antes de empezar con la materia voy a aclarar algunas cosas sobre el propio curso. |
- | * JQuery | + | |
- | * Backbone.js | + | |
- | * Ember.js | + | |
- | Tengo que decir que mis comentarios aunque pretenden ser objetivos estarán sesgados al ser yo el que estoy impartiendo un curso de AngularJS | + | ===== Organización ===== |
+ | El curso está organizado en 3 grandes bloques: | ||
+ | * [[:start#angularjs_basico|AngularJS Básico]] | ||
+ | * [[:start#rest_y_java|REST y Java]] | ||
+ | * [[:start#angularjs_avanzado|AngularJS Avanzado]] | ||
- | ===== JQuery ===== | + | Dentro de cada bloque hay varias unidades y cada unidad está compuesta de temas. Una tema es una única página web y una unidad son varias temas que está relacionados. |
- | Podemos pensar que debe ser algo como JQuery pero mas moderno, nada mal lejos de la realidad compararlo con JQuery. | + | |
- | JQuery realmente no tiene un mayor nivel de abstracción que el propio JavaScript estándar del navegador. JQuery debería haber sido realmente el API nativo de los nagevadores y no una librería que pretender cubrir los huecos dejados por lo navegadores como incompatibilidades entre ellos, API farragosa, etc. Así que JQuery es un parche sobre los navegadores una simple librería para que todo no sea tan tedioso de hacer pero es lo mismo que ya existe en el navegador. Con JQuery por ejemplo no existe el concepto de modelo de una aplicación o no te dice como estructurar tu aplicación etc. Por ello JQuery no es un framework sino simplemente una librería a usar por nuestra aplicación. | + | ===== Versión ===== |
+ | Este curso está basado en la versión estable que había de AngularJS en la fecha de escribir el curso. La versión es AngularJS 1.2. Esto es importante tenerlo en cuenta ya que hay algún ejemplo inicial que no funcionará en versión posteriores. | ||
- | AngularJS juega en otra liga, es un framework que pretende definir la arquitectura de tu aplicación que define claramente la separación entre tu modelo de datos tu vista y tu controlador. Y estás obligado por AngularJS a seguir esa estructura. Ya no haces el JavaScript como tu quieres sino como AngularJS te manda. Y eso realmente da mucha potencia a tu aplicación ya que al seguir una arquitectura definida AngularJS puede ayudarte en la aplicación y tener todo mucho mas estructurado. | ||
- | A vece alguno piensa que con jQuery tambien se podría hacer todo eso pero solo con pesar las ahora de trabajo que harían falta me entran mareos. ¡Si con AngularJS tienes ya gran cantidad de cosas ya hechas y disponibles desde el primer día!!! | + | ===== Malas prácticas ===== |
+ | Como no se puede explicar todo a la vez y para mejorar la comprensión del curso , algunas veces se harán uso de malas prácticas , aunque a lo largo del curso se irán corrigiendo. | ||
- | ===== Backbone ===== | + | Un ejemplo de mala práctica es que todo el JavaScript se pondrá en un solo fichero hasta que lleguemos al tema sobre como separar el código JavaScript en distintos ficheros. Cuando la mala práctica era muy grave o no estaba claro que lo era se ha avisado en el propio curso que mas adelante se explicará de la forma correcta. |
- | [[http://backbonejs.org/|Backbone]] ((Formalmente Backbone.js)) es uno de primeros frameworks cuyo objetivo era organizar las aplicación JavaScript y JQuery no ayudaba en eso ya que no era su objetivo. Se añade en esta comparativa ya que hace unos años era muy utilizado entre gente que quería ir mas allá de JavaScript y tener una arquitectura Modelo-Vista-Controlador bien definida. | + | |
- | El problema de Backbone es que su diseño es muy minimalista y hace muy pocas cosas para lo que hacen a día de hoy otros frameworks. Sin embargo hay que decir que Backbone mas muchos pluging se pueden hacer muchas cosas pero eso no es la solución. Añadir tantos plugin es al final un dolor de cabeza y cada uno realmente es //de su padre y de su madre//. Es mucho mas cómodo que el propio framework te de todas esa funcionalidad central que tanto necesitas. | + | ===== Plunker ===== |
+ | Para los ejemplos que únicamente usan AngularJS y no necesitan Java he usado el servicio que ofrece [[http://plnkr.co/|Plunker]]. Este servicio me permite incluir ejemplos en vivo en la propia página que podas probar sin tener que salir al IDE o tener que descargarlos. Al principio igual te parece extraño pero resulta muy cómodo cuando ves el ejemplo poder hacer cambios para poder así entender mejor lo que se acaba de explicar. | ||
- | Así que no empieces ningún proyecto nuevo con Backbone y alégrate si tienes algún proyecto antiguo que mantener con Backbone ya que seguro que está mejor hecho que si hubiera estado con jQuery únicamente. | + | Los ejemplo en vivo de Plunker tienen el siguiente aspecto: |
- | ===== Ember ===== | ||
- | [[http://emberjs.com/|Ember]] es otro framework JavaScript pero a diferencia Backbone este si que ofrece gran cantidad de funcionalidades. Realmente es el framework contra el que compite AngularJS y nuestra elección debería ser entre uno de los dos. Obviamente la conclusión va a ser que la mejor opción es AngularJS sino no estaría donde este curso de AngularJS sino que estaría dando uno de Ember. | ||
- | ¿que ofrece Ember que no ofrezca AngularJS? Ember tiene algunas coas buenas que no tiene AngularJS: | + | {{url>http://embed.plnkr.co/EQLAbL}} |
- | * Rendimiento : No es que el rendimiento de Ember sea muy bueno es que el de AngularJS no es de lo mejores sobre todo cuando hay gran cantidad de información en una pantalla. Por suerte, el equipo de AngularJS esta trabajando mucho para mejorar el rendimiento. | + | |
- | * Rutas: El servicio de rutas de Ember es claramente superior al de AngularJS 1.2, por suerte la versión 1.3 de AngularJS mejorará mucho su servicio de rutas. | + | |
- | * Principio de acceso uniforme : En Ember puedes acceder a un propiedad y luego cambiarla como un una función que calcula su valor y desde la vista se seguirá viendo del mismo modo. Es decir que te abstrraes de si el dato es propiedad o función. Esto se llama [[http://en.wikipedia.org/wiki/Uniform_access_principle|Principio de acceso uniforme]] y desde mi punto de vista es lo mejor que tiene Ember aunque para ello se debe pagar un precio que es no tener la sencillez de AngularJS. | + | |
- | * Convención sobre configuración: En Ember hay muchas convenciones en vez de haber configuraciones lo que hace que con menos líneas se haga lo mismo. Eso se llama [[http://es.wikipedia.org/wiki/Convenci%C3%B3n_sobre_Configuraci%C3%B3n|Convención sobre Configuración]]. | + | |
- | Aunque eso está bien todo ello viene con un precio. El código que tienes que escribir en JavaScript está //lleno// de código de Ember , en AngularJS siguen la filosofía de los POJSO (Plain Old JavaScript Objects) que es como los POJO de Java. Es decir que no hay que estar heredando de otras clase de AngularJS para trabajar son simplemente clases JavaScript normales. Esto para mi fue lo que me decidió por AngularJS ya que eso me deba una oportunidad de poder hacer muchas cosas con AngularJS sin que pasarana cosas "raras" ya que eran solamente objetos JavaScript normales y corriente. No sabes la de cosas //raras// que acabas haciendo en un proyecto y la de problemas que añades si tienes que pensar que tu modelo debe heredar de clase predefinidas de tu framework. | + | Con los botones de la derecha podrás ver todos los ficheros del ejemplo y modificar el código. no te preocupes si lo cambias, el mio original no lo puedes cambiar aunque si tienes tu propia cuenta en Plunker te los podrás guardar. |
- | Por supuesto no es solo lo anterior lo mejor de AngularJS, otra cosa para mi importante y que no se le suele dar mucha importancia es la flexibilidad que me da Angular para organizarme todo como quiero. Está claro que AngularJS impone unas normas y esas son de obligado cumplimiento pero son solo unas pocas , luego tengo mucha libertad de organizarme todo como quiera. Es como si fuera un framework casi acabado y que en el que tienes que rematar el trabajo con tu propia arquitectura. Para mi eso es una bendición ya que yo si que quiero mi propia arquitectura, aunque para otra gente podría ser algo negativo ya que quieren que se lo den todo hecho. En ese sentido Ember tiene una arquitectura mucho mas rígida lo que como acabamos de ver puede ser una ventaja para algunos. | + | También algunos ejemplos de Plunker contienen ventanas modales con ''alert()'', como el ejemplo se ejecuta nada entrar en la página , verás como al ver un tema te aparece una ventana modal con un mensaje que no sabes que significa. No te asustes , forma parte del ejemplo. |
+ | ===== Ejemplo Seguro Medico ===== | ||
+ | Hay temas en los que se hacen ejemplo muy sencillo para entender como funciona lo que se está explicando pero siempre a lo largo del curso todo lo que se explica se va usando en una aplicación ficticia sobre seguros médicos. A veces algunas cosas quedarán un poco ortopédicas al aplicarlas en el ejemplo del seguro médico pero se ha hecho para poder ver todos los conceptos en un único ejemplo. | ||
- | Yo comparo a Ember y a AngularJS con el mundo Java de la siguiente manera (salvando las distancias y es simplemente para que se entienda las diferencias entre ellos). Para mi Ember es como Grails que ya ha decidido como es todo. Es mucho mas fácil hacer todo pero es difícil salirte de su filosofía. Por otro lado AngularJS es como Spring+Hibernate+...+... etc, etc.. Todos juntos no hacen nada ya que cada uno no sabe mucho del otro pero los pueden juntar a tu manera y montarte tu propia arquitectura. | ||
- | Por último es una cuestión de popularidad, AngularJS creo que ya ha ganado la guerra sea o no sea realmente mejor que Ember. Los siguiente números los he sacado del siguiente blog [[http://www.airpair.com/js/javascript-framework-comparison|AngularJS vs. Backbone.js vs. Ember.js]]: | ||
- | ^ Metric ^ AngularJS ^ Backbone.js ^ Ember.js ^ | + | ===== Estilo ===== |
- | | Estrellas en Github | 27.2k | 18.8k | 11k | | + | El curso no es sobre diseño web ni HTML ,etc. así que no hemos hecho nada para hacer mas vistosa o atractiva la aplicación. El motivo de ello ha sido evitar distracciones que pudieran entorpecer la comprensión de lo que queremos realmente explicar. Lo mismo pasa con el HTML. Se ha prescindido de todo el HTML posible aun a costa de que pudiera no se lo mas correcto. Pero se ha hecho así ya que ésto tampoco es un curso de HTML y así no nos distrae tanto tag HTML. |
- | | Modules de terceras partes | 800 ngmodules | 236 backplugs | 21 emberaddons | | + | |
- | | Preguntas en StackOverflow | 49.5k | 15.9k | 11.2k | | + | |
- | | Resultados en YouTube| ~75k | ~16k | ~6k | | + | |
- | | Contribuidores en GitHub | 928 | 230 | 393 | | + | |
- | | Usuarios de extensiones Chrome | 150k | 7k | 38.3k | | + | |
- | Con estas cifras, el claro ganador es AngularJS y solo por eso ya deberíamos elegir AngularJS ¿Porque? son muchos los motivos, al haber mas gente usando AngularJS | ||
- | * Hay mas documentación | ||
- | * Encuentras antes solución a tus problemas y errores | ||
- | * Se hacen mas //librerías// ((En AngularJs son módulos)) que te pueden servir en tu proyecto | ||
- | * Todos los trucos que necesites ya los ha encontrado alguien por ti. | ||
- | * Etc. | ||
- | Así que no te lo pienses, AngularJS es el frameowrk que debes empezar a prender ya si eres un desarrollador JavaScript. | + | ===== Lo que falta ===== |
+ | Faltarán muchas cosas en el curso y otras relacionadas con el mundo JavaScript pero lo mas grave que no voy a contar es el tema de los Test automáticos. Los diseñadores de AngularJS se han esforzador por crear un framework que sea //facil// de testear automáticamente pero en el curso no verás nada de eso. Así que es la mayor deficiencia que vas a encontrar en el curso. | ||
- | Aun así hay una gráfica que suele circular por internet sobre como te gusta AngularJs a lo largo del tiempo: | ||
- | {{:unidades:01_introduccion:feelings_about_angularjs_over_time.png?nolink|}} | + | ===== Disculpas ===== |
- | + | Por último disculparme por los errores que puede haber en el curso, sobre todo de ortografía y de redacción, son muchísimas horas escribiendo y seguro que se me han escapado cosas. Si ves algún fallo no dudes en indicármelo para que pueda corregirlo. | |
- | Y está sacada del siguiente blog [[http://www.bennadel.com/blog/2439-my-experience-with-angularjs-the-super-heroic-javascript-mvw-framework.htm|My Experience With AngularJS - The Super-heroic JavaScript MVW Framework]]. Y significa que con AngularJS tienes tus altibajos pero en general cada día te gusta mas. | + | |
- | + | ||
- | Por último podríamos decir que AngularJS está hecho por Google pero después de todo no creo que sea algo que nos haga decidor usarlo. | + |