Saltar al contenido

Etiqueta: webdev

¿Sirve una Mac con Apple Sillicon (M1, M1 Pro, M1 Max) para el desarrollo web?

Hace unos meses adquirí una Mac mini con el nuevo procesador de Apple Sillicon (M1). Estaba buscando remplazar mi Mac mini anterior y cuando vi que sacaron nuevos equipos con el chip M1 que en las pruebas de rendimiento superaban a la mayoría de procesadores, no producían mucho calor (vivo en un lugar caliente ) y por lo tanto no eran equipos ruidosos.

¿Que tienen de distinto los chips M1 y cual adquirir?

Los chips de Apple Sillicon (M1) son diseñados por la misma Apple. Utilizan la arquitectura ARM a diferencia de x86 que era la utilizada por AMD e Intel (quien proveía procesadores a Apple desde el 2005).

Esto significa que utilizan otra instrucciones, por lo tanto los programas deben ser compilados para esta arquitectura. Pero tiene como ventaja que los equipos con ARM se diseñan para consumir menos energía y actualmente poseen gran rendimiento.

El chip de Apple Sillicon (M1)
El chip de Apple Sillicon (M1)

Apple Sillicon (M1) para el desarrollo web

Respecto a la compatibilidad de aplicaciones, macOS ofrece Rosseta 2. Una aplicación que traduce el código de x86 a ARM permitiendo ejecutar cualquier aplicación previa sin problemas. Respecto al rendimiento, obviamente es menos al nativo pero igual están a la par con los equipos anteriores de Apple con procesadores Intel.

Sin embargo, a estas alturas la mayoría de aplicaciones ofrecen compatibilidad para el Apple Sillicon (M1). Por lo que podrás trabajar sin problemas como si estuvieses en otro equipo.

Editores o IDEs

Actualmente los principales IDEs para programación web ofrecen compatibilidad nativa. El primero en probar fue Sublime Text 4 que es el mas rápido que usado. Xcode como es el propio de Apple también es rápido pero casi no me gusta para desarrollo web. Visual Studio Code también ofrece version nativa que funciona muy rápido al igual que la suite de Jet Brains.

Lo único que se debe tener cuidado es con instalar la versión para ARM y no la de x86. Ya que todos estos editores ofrecen ambas versiones y a pesar que la versión de x86 corre en tu equipo. No lo hará de forma nativa y es muy lento.

Compatibilidad con lenguajes de programación

macOS ofrece versiones nativas de lenguajes com Ruby, PHP, entre otros. Sin embargo, puedes conseguir versiones nativas de Rust, Go, PHP, Ruby, JavaScript (con Node) y usarlas sin problemas. Si usas lenguajes interpretados, el código será igual entre arquitecturas así que no habrá problemas al momento de ejecutar o desarrollar tus aplicaciones. En nodeJS tuve que compilar algunos módulos para que quedaran nativos para que funcionara en mis proyectos, pero creo que otro sistemas operativos también hace eso la primera vez.

Docker

Docker requiere de Linux para funcionar, en macOS Big Sur ofrecen algo llamado Virtualization Framework que sirve para correr otros sistemas como Linux en un hypervisor. Docker desde la version 3.3 ofrece soporte para equipos con Apple Sillicon (M1). Desde que actualicé a la versión 4 no he tenido problemas siguiendo estas recomendaciones:

  • Uso las imágenes de mis contenedores en versiones de ARM para mejorar la velocidad. Algunos contenedores como el de Mailcatch, solo tienen para x86 y lo uso sin problemas.
  • Usar qemu como método de virtualización para tener 100% de estabilidad. Yo uso Virtualization Network y a veces falla al hacer operaciones pesadas con la base de datos.
  • La imagen oficial de MySQL no está para ARM y uso MariaDB en ARM. Siempre que intente usar MySQL inclusive con la emulación falla, desconozco la causa y por eso lo dejé de usar.

Pero en general funciona bien, estable y hasta los momentos no ha afectado mi trabajo.

Homebrew y aplicaciones del sistema

Te recomiendo visitar Does it ARM para buscar si el software corre en tu equipo. Aunque no he tenido problemas de compatibilidad. Suelo instalar las aplicaciones del sistema a través Homebrew y este separa las versiones de x86 y ARM por separado, así que si ofrece versión nativa se instala esa, si no, usará la arquitectura de x86. Todo esto funciona de forma transparente así que no habrá que intervenir.

Recomendaciones finales

Me parece que los equipos con Apple Sillicon (M1) son buenos para el desarrollo web, la relación costo/rendimiento es muy buena, gran compatibilidad con las aplicaciones existentes de macOS, gran potencia, poco consumo de energía y ningún ruido en el hardware. Hacen de estos unos equipos una buena compra para el desarrollo web.

Por ahora, la única limitación que veo es la cantidad de RAM, actualmente un máximo de 16GB, esta cantidad compartida con el chip de vídeo puede ser muy poco para algunos usuarios y probablemente deseen esperar por la siguiente generación de equipos con Apple Sillicon. Sin embargo, debido a la velocidad de los discos, al usar el área de intercambio o swap, la velocidad sigue siendo muy alta por lo que si necesitas mas RAM la velocidad sigue siendo muy potente, pero no es lo recomendable.

Respecto al disco duro, no me preocupa. Tengo una portátil con un disco duro SSD de menor calidad y hasta los momentos me ha durado 7 años, estoy seguro que esos me durarán mucho mas. Ademas he tomado medidas como no indexar ciertos archivos para aumentar el rendimiento y vida útil del disco duro.

En fin, si buscas un equipo con buen costo/rendimiento para realizar desarrollo web y prefieres usar macOS. Te recomiendo las computadoras con Apple Sillicon (M1). No tendrás problemas de compatibilidad con las aplicaciones existentes y el rendimiento será muy bueno.

Si compraste un equipo o vas a hacerlo, ¡Bienvenido(a) a la arquitectura ARM!

Deja un comentario

HTML5 ★ Boilerplate una plantilla para crear nuestras páginas

Esta tecnología la descubrí leyendo el blog de Paul Irish, al principio no la entendí y pensaba que era un framework para desarrollar páginas web pero luego de ver varios tutoriales comprendí que realmente es una plantilla en HTML5 que incluye (en mi opinión) las mejores herramientas de detección de características del navegador, compresión de código HTML, CSS y Javascript; métodos para acelerar la carga de librerías de Javascript, entre otros.

¿Por qué usar Boilerplate?

Si eres desarrollador web (frontend) especializado en la parte visual debes usar esta herramienta para tus proyectos, la idea es ofrecer una plantilla o página web usando HTML5 sin perder compatibilidad con navegadores antiguos que no lo soportan (o solo parcialmente). Además utiliza las mejores prácticas e incluye las mejores herramientas para tener una buena página como: utiliza Modernizr para detectar las funcionalidades soportadas por los navegadores y aplicar solo ha ellos ciertos efectos CSS3 por dar un ejemplo, no reinicia los estilos de los navegadores sino que los normaliza, incluye compatibilidad con la mayoría de servidores web para aplicar técnicas de compresión de datos y pequeñas reglas de seguridad, compatibilidad con dispositivos móviles, herramientas para comprimir el código Javascript entre otros.

Con esto te ahorras mucho tiempo en implementar todas estas cosas, ademas garantiza tener una páginas que usa lo mejor de la tecnología actual sin romper compatibilidad con los navegadores antiguos. Cabe destacar que es solo para crear la plantilla inicial, es una base para ir agregando tu markup, librerías, reglas CSS, etc. Si utilizas un CMS puedes hacer tu propia plantilla o buscar en Internet plantillas ya optimizadas con Boilerplate.

Mi experiencia

Utilicé Boilerplate para MiguelUseche.com (mi sitio profesional) y me ayudó a realizar una página que carga en poco tiempo, funciona en casi todos los navegadores, me ahorro tiempo al dar soporte a Internet Explorer 6 y 7, y la adaptación a dispositivos móviles requirió poco trabajo. Obviamente no todo se hizo automático, sino su base de código me permitió ahorrar mucho tiempo al dar soporte a distintos navegadores.

Boilerplate funciona con una plantilla base, la cual vamos agregando nuestro markup y vamos creando nuestra página/aplicación web. Luego a través de unos scripts «construimos» el sitio optimizado el cual se guarda en la carpeta build, durante este proceso, se comprimen las reglas CSS, el código HTML, los archivos de Javascript, los une si están separados en varios archivos, optimiza las imágenes para ser vistas en la web, actualiza las rutas para incluir estos scripts y mas. Todo lo que debemos hacer es configurar un archivo donde le indicamos todo lo que queremos hacer.

Conclusión

Si quieres hacer un sitio con HTML5 y realizar ciertas acciones con los navegadores que no lo soporten, utiliza Boilerplate. Con todas la base ya optimizada que trae permite crear buenos sitios en menos tiempo, y si son como yo: desarrolladores web especializados en la programación del sitio y no en la parte visual; les ayudará mucho esta tecnología al realizar cosas que no comprendemos mucho. Sin embargo, si eres desarrollador front-end supongo que te ayudará a ahorrar tiempo y te ofrece configuración para adaptarse a tus requisitos o forma de trabajar.

Si quieres comenzar a utilizar esta tecnología pueden ver el siguiente video que está en inglés:

An introduction to HTML5 Boilerplate v4.0

Para descargarlo, entren a la página oficial: https://html5boilerplate.com/

2 comentarios