Skip to content

Commit a205358

Browse files
clsourceclsource
committed
added mobile apps chapter
1 parent 5b9b728 commit a205358

File tree

3 files changed

+547
-21
lines changed

3 files changed

+547
-21
lines changed

‎book/chapters/mobile/chapter.adoc‎

Lines changed: 103 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,105 @@
11
== Aplicaciones Móviles
22

3-
- Ecosistema Móvil
4-
- Tecnologías para crear Apps Móviles
5-
- Precios y valores
6-
- ¿Qué usar Android o iOS?
7-
- ¿Cómo crear una app Android?.
3+
Las aplicaciones móviles son ejecutadas en los denominados "Teléfonos Inteligentes" o _Smartphones_.
4+
La industria de las aplicaciones móviles está dominada principalmente por dos sistemas operativos:
5+
_Android_ (Google) e _iOS_ (Apple). Aunque existen otros menores como _Tinzen_ (Samsung) y _HarmonyOS_ (Hwuawei).
6+
7+
=== Comparación entre Android e iOS
8+
9+
|===
10+
| Plataforma | Precio cuenta Dev | Lenguajes de Programación | Tienda | Comentario
11+
| Android | $20 USD (único) | Kotlin, Java | Playstore | Popular en Latinoamérica y países donde no hay Apple Store oficial.
12+
| iOS | $100 USD (al año) | Swift, Objective-C | Appstore | Popular en países donde existen Apple Store oficiales, debido a su más elevado precio.
13+
|===
14+
15+
=== Tecnologías Nativas
16+
17+
- _Android_ utiliza los lenguajes de programación https://kotlinlang.org/[Kotlin] y
18+
https://docs.oracle.com/en/java/[Java].
19+
20+
- _iOS_ utiliza los lenguajes de programación https://www.swift.org/[Swift] y
21+
https://en.wikipedia.org/wiki/Objective-C[Objective-C].
22+
23+
=== Tecnologías Alternativas
24+
25+
En los últimos años nacieron varias formas nuevas de crear aplicaciones móviles.
26+
Enfocadas en reutilizar el código y reducir el esfuerzo del desarrollador
27+
necesario para dar vida a una aplicación. Se ha seleccionado algunas tecnologías
28+
diferentes: Onsen, NativeScript, React Native, Jasonelle, Elixir Desktop y LiveNative.
29+
Para permitir una comparación, aunque no es una lista exhaustiva.
30+
31+
==== Categorías
32+
33+
Entre los frameworks de desarrollo móvil nos encontramos con dos grandes categorías.
34+
35+
===== Frameworks Nativos
36+
37+
Son tecnologías que permiten compilar a nativo la aplicación (no utilizan un navegador web como base).
38+
39+
- Aplicaciones hechas con Kotlin/Swift/C.
40+
- Aplicaciones hechas con frameworks de videojuegos (Godot, SDL, Unity, Unreal).
41+
- Aplicaciones que tras un proceso de compilación, ejecutan el código nativo (React Native, Native Script, LiveNative).
42+
43+
===== ¿Cuándo usar?
44+
45+
La mayoría de las opciones utilizan o están inspiradas en tecnologías que surgieron de la web (
46+
Javascript, CSS, HTML). Por lo tanto, en determinadas situaciones es mejor seguir con las tecnologías de
47+
desarrollador oficiales para Android o iOS. Algunas razones válidas son:
48+
49+
- La organización invirtió mucho en Kotlin o Swift Developers.
50+
- Los desarrolladores son verdaderos expertos en Java, Kotlin, Objective-C o Swift. Tienen muchos años de experiencia y utilizar una de las nuevas tecnologías debería ser un proceso lento.
51+
- La organización ya tiene implementados procesos de pruebas, herramientas de integración continua, mejores prácticas y otras cosas. Adoptar estas nuevas tecnologías significa rehacer todo el proceso de definición de herramientas adaptadas a las nuevas tecnologías.
52+
- El uso de nuevas tecnologías debe ser sólo en proyectos experimentales o no críticos. Si no se toma con suficiente cuidado, la organización corre el riesgo de ralentizar la productividad y frustrar a los desarrolladores.
53+
- Si el cliente requiere algo hecho sólo con código nativo. Los requisitos sólo se pueden realizar con SDK oficiales.
54+
55+
===== Frameworks WebView
56+
57+
Los frameworks tipo _WebView_ permiten crear aplicaciones utilizando las tecnologías web (HTML, JS, CSS).
58+
Básicamente son un navegador web que permite utilizar algunas APIs nativas a través de puentes
59+
creados con código nativo.
60+
61+
Son muy populares sobre todo si ya tienes una aplicación web y debes adaptarla a móvil, o para hacer
62+
prototipos rápidos.
63+
64+
En ésta categoría están.
65+
66+
- Onsen
67+
- Ionic
68+
- Elixir Desktop
69+
- Jasonelle
70+
71+
===== ¿Cuándo usar?
72+
73+
Útil para crear aplicaciones y prototipos rápidos.
74+
Algunos prototipos requerirán integrar herramientas nativas, la web no cuenta con todas las apis que tiene una opción nativa.
75+
La experiencia de usuario web (Web UX) es diferente a UX móvil nativo. Tener en cuenta que al diseñar interfaces y experiencias de usuario,
76+
especialmente cuando se utilizan entradas seleccionadas u otros componentes. La contraparte nativa podría ser más grande y podría romper el diseño original.
77+
78+
- Pequeñas aplicaciones
79+
- Prototipos rápidos
80+
- Aplicaciones simples de línea de negocios (https://en.wikipedia.org/wiki/Line_of_business[https://en.wikipedia.org/wiki/Line_of_business]).
81+
- Aplicaciones que utilizan mucho formularios y gráficos para la entrada y presentación de datos.
82+
83+
==== ¿Cúal usar?
84+
85+
Si la organización está formada principalmente por desarrolladores web, utilizar Onsen o Jasonelle
86+
podría ser la primera opción para empezar a crear aplicaciones móviles.
87+
88+
Si usan React, entonces React Native podría ser la opción correcta.
89+
Si lo prefiere, puede elegir Angular Onsen y NativeScript.
90+
91+
_Elixir Desktop_ y _LiveNative_ son dos opciones muy buenas que permiten utilizar
92+
la potente tecnología de _Elixir_ para el desarrollo de aplicaciones móviles.
93+
No solamente tendrás una aplicación móvil, si no también el backend completo,
94+
por lo que eligiendo la tecnologías de _Elixir_ simplificarás en gran medida
95+
los componentes necesarios para tener una aplicación móvil robusta y preparada para el futuro.
96+
97+
|===
98+
| Framework | Web | Categoría | Comentario
99+
| Jasonelle | https://jasonelle.com[https://jasonelle.com] | WebView + Javascript | Es un envoltorio (wrapper) para una url y convertirla a aplicación.
100+
| Onsen | https://onsen.io/[https://onsen.io/] | WebView + Javascript | Puedes generar tu aplicación con HTML, CSS y JS. Alternativa a _IONIC_.
101+
| Elixir Desktop | https://github.com/elixir-desktop/desktop[https://github.com/elixir-desktop/desktop] | WebView + Elixir | Ejecuta un servidor web local con el framework https://www.phoenixframework.org/[Phoenix].
102+
| Native Script | https://nativescript.org/[https://nativescript.org/] | Nativo + Typescript | Permite crear aplicaciones nativas usando Typescript y ser un puente para otras tecnologías.
103+
| React Native | https://reactnative.dev/[https://reactnative.dev/] | Nativo + Javascript | Enfocado en generar aplicaciones para iOS y Android usando Javascript y el frontend framework _React_.
104+
| LiveNative | https://github.com/liveview-native[https://github.com/liveview-native] | Nativo + Elixir | Permite generar aplicaciones nativas conectándose a un servidor con Phoenix framework.
105+
|===

‎docs/book.xml‎

Lines changed: 198 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<book xmlns="http://docbook.org/ns/docbook" xmlns:xl="http://www.w3.org/1999/xlink" version="5.0" xml:lang="es">
55
<info>
66
<title>Elixir FullStack</title>
7-
<date>2024-03-01</date>
7+
<date>2024-04-11</date>
88
<copyright>
99
<holder>CC-BY-NC-SA 4.0</holder>
1010
</copyright>
@@ -5988,23 +5988,215 @@ A pesar de ejecutarse en menos hardware, los tiempos de respuesta se redujeron s
59885988
</chapter>
59895989
<chapter xml:id="_aplicaciones_móviles_2">
59905990
<title>Aplicaciones Móviles</title>
5991+
<simpara>Las aplicaciones móviles son ejecutadas en los denominados "Teléfonos Inteligentes" o <emphasis>Smartphones</emphasis>.
5992+
La industria de las aplicaciones móviles está dominada principalmente por dos sistemas operativos:
5993+
<emphasis>Android</emphasis> (Google) e <emphasis>iOS</emphasis> (Apple). Aunque existen otros menores como <emphasis>Tinzen</emphasis> (Samsung) y <emphasis>HarmonyOS</emphasis> (Hwuawei).</simpara>
5994+
<section xml:id="_comparación_entre_android_e_ios">
5995+
<title>Comparación entre Android e iOS</title>
5996+
<informaltable frame="all" rowsep="1" colsep="1">
5997+
<tgroup cols="5">
5998+
<colspec colname="col_1" colwidth="20*"/>
5999+
<colspec colname="col_2" colwidth="20*"/>
6000+
<colspec colname="col_3" colwidth="20*"/>
6001+
<colspec colname="col_4" colwidth="20*"/>
6002+
<colspec colname="col_5" colwidth="20*"/>
6003+
<tbody>
6004+
<row>
6005+
<entry align="left" valign="top"><simpara>Plataforma</simpara></entry>
6006+
<entry align="left" valign="top"><simpara>Precio cuenta Dev</simpara></entry>
6007+
<entry align="left" valign="top"><simpara>Lenguajes de Programación</simpara></entry>
6008+
<entry align="left" valign="top"><simpara>Tienda</simpara></entry>
6009+
<entry align="left" valign="top"><simpara>Comentario</simpara></entry>
6010+
</row>
6011+
<row>
6012+
<entry align="left" valign="top"><simpara>Android</simpara></entry>
6013+
<entry align="left" valign="top"><simpara>$20 USD (único)</simpara></entry>
6014+
<entry align="left" valign="top"><simpara>Kotlin, Java</simpara></entry>
6015+
<entry align="left" valign="top"><simpara>Playstore</simpara></entry>
6016+
<entry align="left" valign="top"><simpara>Popular en Latinoamérica y países donde no hay Apple Store oficial.</simpara></entry>
6017+
</row>
6018+
<row>
6019+
<entry align="left" valign="top"><simpara>iOS</simpara></entry>
6020+
<entry align="left" valign="top"><simpara>$100 USD (al año)</simpara></entry>
6021+
<entry align="left" valign="top"><simpara>Swift, Objective-C</simpara></entry>
6022+
<entry align="left" valign="top"><simpara>Appstore</simpara></entry>
6023+
<entry align="left" valign="top"><simpara>Popular en países donde existen Apple Store oficiales, debido a su más elevado precio.</simpara></entry>
6024+
</row>
6025+
</tbody>
6026+
</tgroup>
6027+
</informaltable>
6028+
</section>
6029+
<section xml:id="_tecnologías_nativas">
6030+
<title>Tecnologías Nativas</title>
6031+
<itemizedlist>
6032+
<listitem>
6033+
<simpara><emphasis>Android</emphasis> utiliza los lenguajes de programación <link xl:href="https://kotlinlang.org/">Kotlin</link> y
6034+
<link xl:href="https://docs.oracle.com/en/java/">Java</link>.</simpara>
6035+
</listitem>
6036+
<listitem>
6037+
<simpara><emphasis>iOS</emphasis> utiliza los lenguajes de programación <link xl:href="https://www.swift.org/">Swift</link> y
6038+
<link xl:href="https://en.wikipedia.org/wiki/Objective-C">Objective-C</link>.</simpara>
6039+
</listitem>
6040+
</itemizedlist>
6041+
</section>
6042+
<section xml:id="_tecnologías_alternativas">
6043+
<title>Tecnologías Alternativas</title>
6044+
<simpara>En los últimos años nacieron varias formas nuevas de crear aplicaciones móviles.
6045+
Enfocadas en reutilizar el código y reducir el esfuerzo del desarrollador
6046+
necesario para dar vida a una aplicación. Se ha seleccionado algunas tecnologías
6047+
diferentes: Onsen, NativeScript, React Native, Jasonelle, Elixir Desktop y LiveNative.
6048+
Para permitir una comparación, aunque no es una lista exhaustiva.</simpara>
6049+
<section xml:id="_categorías">
6050+
<title>Categorías</title>
6051+
<simpara>Entre los frameworks de desarrollo móvil nos encontramos con dos grandes categorías.</simpara>
6052+
<section xml:id="_frameworks_nativos">
6053+
<title>Frameworks Nativos</title>
6054+
<simpara>Son tecnologías que permiten compilar a nativo la aplicación (no utilizan un navegador web como base).</simpara>
6055+
<itemizedlist>
6056+
<listitem>
6057+
<simpara>Aplicaciones hechas con Kotlin/Swift/C.</simpara>
6058+
</listitem>
6059+
<listitem>
6060+
<simpara>Aplicaciones hechas con frameworks de videojuegos (Godot, SDL, Unity, Unreal).</simpara>
6061+
</listitem>
6062+
<listitem>
6063+
<simpara>Aplicaciones que tras un proceso de compilación, ejecutan el código nativo (React Native, Native Script, LiveNative).</simpara>
6064+
</listitem>
6065+
</itemizedlist>
6066+
</section>
6067+
<section xml:id="_cuándo_usar">
6068+
<title>¿Cuándo usar?</title>
6069+
<simpara>La mayoría de las opciones utilizan o están inspiradas en tecnologías que surgieron de la web (
6070+
Javascript, CSS, HTML). Por lo tanto, en determinadas situaciones es mejor seguir con las tecnologías de
6071+
desarrollador oficiales para Android o iOS. Algunas razones válidas son:</simpara>
6072+
<itemizedlist>
6073+
<listitem>
6074+
<simpara>La organización invirtió mucho en Kotlin o Swift Developers.</simpara>
6075+
</listitem>
6076+
<listitem>
6077+
<simpara>Los desarrolladores son verdaderos expertos en Java, Kotlin, Objective-C o Swift. Tienen muchos años de experiencia y utilizar una de las nuevas tecnologías debería ser un proceso lento.</simpara>
6078+
</listitem>
6079+
<listitem>
6080+
<simpara>La organización ya tiene implementados procesos de pruebas, herramientas de integración continua, mejores prácticas y otras cosas. Adoptar estas nuevas tecnologías significa rehacer todo el proceso de definición de herramientas adaptadas a las nuevas tecnologías.</simpara>
6081+
</listitem>
6082+
<listitem>
6083+
<simpara>El uso de nuevas tecnologías debe ser sólo en proyectos experimentales o no críticos. Si no se toma con suficiente cuidado, la organización corre el riesgo de ralentizar la productividad y frustrar a los desarrolladores.</simpara>
6084+
</listitem>
6085+
<listitem>
6086+
<simpara>Si el cliente requiere algo hecho sólo con código nativo. Los requisitos sólo se pueden realizar con SDK oficiales.</simpara>
6087+
</listitem>
6088+
</itemizedlist>
6089+
</section>
6090+
<section xml:id="_frameworks_webview">
6091+
<title>Frameworks WebView</title>
6092+
<simpara>Los frameworks tipo <emphasis>WebView</emphasis> permiten crear aplicaciones utilizando las tecnologías web (HTML, JS, CSS).
6093+
Básicamente son un navegador web que permite utilizar algunas APIs nativas a través de puentes
6094+
creados con código nativo.</simpara>
6095+
<simpara>Son muy populares sobre todo si ya tienes una aplicación web y debes adaptarla a móvil, o para hacer
6096+
prototipos rápidos.</simpara>
6097+
<simpara>En ésta categoría están.</simpara>
59916098
<itemizedlist>
59926099
<listitem>
5993-
<simpara>Ecosistema Móvil</simpara>
6100+
<simpara>Onsen</simpara>
59946101
</listitem>
59956102
<listitem>
5996-
<simpara>Tecnologías para crear Apps Móviles</simpara>
6103+
<simpara>Ionic</simpara>
59976104
</listitem>
59986105
<listitem>
5999-
<simpara>Precios y valores</simpara>
6106+
<simpara>Elixir Desktop</simpara>
60006107
</listitem>
60016108
<listitem>
6002-
<simpara>¿Qué usar Android o iOS?</simpara>
6109+
<simpara>Jasonelle</simpara>
60036110
</listitem>
6111+
</itemizedlist>
6112+
</section>
6113+
<section xml:id="_cuándo_usar_2">
6114+
<title>¿Cuándo usar?</title>
6115+
<simpara>Útil para crear aplicaciones y prototipos rápidos.
6116+
Algunos prototipos requerirán integrar herramientas nativas, la web no cuenta con todas las apis que tiene una opción nativa.
6117+
La experiencia de usuario web (Web UX) es diferente a UX móvil nativo. Tener en cuenta que al diseñar interfaces y experiencias de usuario,
6118+
especialmente cuando se utilizan entradas seleccionadas u otros componentes. La contraparte nativa podría ser más grande y podría romper el diseño original.</simpara>
6119+
<itemizedlist>
60046120
<listitem>
6005-
<simpara>¿Cómo crear una app Android?.</simpara>
6121+
<simpara>Pequeñas aplicaciones</simpara>
6122+
</listitem>
6123+
<listitem>
6124+
<simpara>Prototipos rápidos</simpara>
6125+
</listitem>
6126+
<listitem>
6127+
<simpara>Aplicaciones simples de línea de negocios (<link xl:href="https://en.wikipedia.org/wiki/Line_of_business">https://en.wikipedia.org/wiki/Line_of_business</link>).</simpara>
6128+
</listitem>
6129+
<listitem>
6130+
<simpara>Aplicaciones que utilizan mucho formularios y gráficos para la entrada y presentación de datos.</simpara>
60066131
</listitem>
60076132
</itemizedlist>
6133+
</section>
6134+
</section>
6135+
<section xml:id="_cúal_usar">
6136+
<title>¿Cúal usar?</title>
6137+
<simpara>Si la organización está formada principalmente por desarrolladores web, utilizar Onsen o Jasonelle
6138+
podría ser la primera opción para empezar a crear aplicaciones móviles.</simpara>
6139+
<simpara>Si usan React, entonces React Native podría ser la opción correcta.
6140+
Si lo prefiere, puede elegir Angular Onsen y NativeScript.</simpara>
6141+
<simpara><emphasis>Elixir Desktop</emphasis> y <emphasis>LiveNative</emphasis> son dos opciones muy buenas que permiten utilizar
6142+
la potente tecnología de <emphasis>Elixir</emphasis> para el desarrollo de aplicaciones móviles.
6143+
No solamente tendrás una aplicación móvil, si no también el backend completo,
6144+
por lo que eligiendo la tecnologías de <emphasis>Elixir</emphasis> simplificarás en gran medida
6145+
los componentes necesarios para tener una aplicación móvil robusta y preparada para el futuro.</simpara>
6146+
<informaltable frame="all" rowsep="1" colsep="1">
6147+
<tgroup cols="4">
6148+
<colspec colname="col_1" colwidth="25*"/>
6149+
<colspec colname="col_2" colwidth="25*"/>
6150+
<colspec colname="col_3" colwidth="25*"/>
6151+
<colspec colname="col_4" colwidth="25*"/>
6152+
<tbody>
6153+
<row>
6154+
<entry align="left" valign="top"><simpara>Framework</simpara></entry>
6155+
<entry align="left" valign="top"><simpara>Web</simpara></entry>
6156+
<entry align="left" valign="top"><simpara>Categoría</simpara></entry>
6157+
<entry align="left" valign="top"><simpara>Comentario</simpara></entry>
6158+
</row>
6159+
<row>
6160+
<entry align="left" valign="top"><simpara>Jasonelle</simpara></entry>
6161+
<entry align="left" valign="top"><simpara><link xl:href="https://jasonelle.com">https://jasonelle.com</link></simpara></entry>
6162+
<entry align="left" valign="top"><simpara>WebView + Javascript</simpara></entry>
6163+
<entry align="left" valign="top"><simpara>Es un envoltorio (wrapper) para una url y convertirla a aplicación.</simpara></entry>
6164+
</row>
6165+
<row>
6166+
<entry align="left" valign="top"><simpara>Onsen</simpara></entry>
6167+
<entry align="left" valign="top"><simpara><link xl:href="https://onsen.io/">https://onsen.io/</link></simpara></entry>
6168+
<entry align="left" valign="top"><simpara>WebView + Javascript</simpara></entry>
6169+
<entry align="left" valign="top"><simpara>Puedes generar tu aplicación con HTML, CSS y JS. Alternativa a <emphasis>IONIC</emphasis>.</simpara></entry>
6170+
</row>
6171+
<row>
6172+
<entry align="left" valign="top"><simpara>Elixir Desktop</simpara></entry>
6173+
<entry align="left" valign="top"><simpara><link xl:href="https://github.com/elixir-desktop/desktop">https://github.com/elixir-desktop/desktop</link></simpara></entry>
6174+
<entry align="left" valign="top"><simpara>WebView + Elixir</simpara></entry>
6175+
<entry align="left" valign="top"><simpara>Ejecuta un servidor web local con el framework <link xl:href="https://www.phoenixframework.org/">Phoenix</link>.</simpara></entry>
6176+
</row>
6177+
<row>
6178+
<entry align="left" valign="top"><simpara>Native Script</simpara></entry>
6179+
<entry align="left" valign="top"><simpara><link xl:href="https://nativescript.org/">https://nativescript.org/</link></simpara></entry>
6180+
<entry align="left" valign="top"><simpara>Nativo + Typescript</simpara></entry>
6181+
<entry align="left" valign="top"><simpara>Permite crear aplicaciones nativas usando Typescript y ser un puente para otras tecnologías.</simpara></entry>
6182+
</row>
6183+
<row>
6184+
<entry align="left" valign="top"><simpara>React Native</simpara></entry>
6185+
<entry align="left" valign="top"><simpara><link xl:href="https://reactnative.dev/">https://reactnative.dev/</link></simpara></entry>
6186+
<entry align="left" valign="top"><simpara>Nativo + Javascript</simpara></entry>
6187+
<entry align="left" valign="top"><simpara>Enfocado en generar aplicaciones para iOS y Android usando Javascript y el frontend framework <emphasis>React</emphasis>.</simpara></entry>
6188+
</row>
6189+
<row>
6190+
<entry align="left" valign="top"><simpara>LiveNative</simpara></entry>
6191+
<entry align="left" valign="top"><simpara><link xl:href="https://github.com/liveview-native">https://github.com/liveview-native</link></simpara></entry>
6192+
<entry align="left" valign="top"><simpara>Nativo + Elixir</simpara></entry>
6193+
<entry align="left" valign="top"><simpara>Permite generar aplicaciones nativas conectándose a un servidor con Phoenix framework.</simpara></entry>
6194+
</row>
6195+
</tbody>
6196+
</tgroup>
6197+
</informaltable>
6198+
</section>
6199+
</section>
60086200
</chapter>
60096201
<bibliography xml:id="_bibliografía">
60106202
<title>Bibliografía</title>

0 commit comments

Comments
 (0)