Cómo Elegir el Mejor Framework de Front-End

Este articulo fue escrito por Giorgi Bakradze. Originalmente publicado en Toptal.

El mundo de JavaScript es un entorno rico con docenas de herramientas, bibliotecas y frameworks. Pero, con muchas opciones, viene mucha confusión. Realmente es una espada de doble filo.

Si bien tienes mucho espacio para la creatividad y la experimentación, a veces no estás seguro de qué biblioteca o framework elegir.

El framework de front-end que elija puede hacer o deshacer su proyecto en el largo plazo.

En este artículo, veremos algunos de los frameworks de JavaScript más populares y cómo se comparan entre sí. Examinaremos cinco perspectivas diferentes de estos frameworks, lo que generalmente facilita el proceso de tomar una decisión sobre su próximo framework de JavaScript.

Ya sea que elijas uno de estos populares frameworks de JavaScript o algo más esotérico, debes tener en cuenta cada uno de estos aspectos.

Disponibilidad de recursos de aprendizaje

Este es obvio, pero a menudo se pasa por alto. Si bien la elegante página de inicio de algún framework puede llamar su atención, aún necesita algunos cursos, libros, tutoriales y artículos adicionales además de la documentación aburrida y seca para ayudarlo a comenzar.

Crear un framework impresionante es una cosa y comunicar las ideas centrales detrás de esto es diferente. De hecho, hay muchos desarrolladores profesionales que se especializan en coaching. Un recurso de aprendizaje bien diseñado reducirá drásticamente su curva de aprendizaje.

Busca recursos de autores confiables con los que tenga experiencia previa; al final valdrá la pena su tiempo. Si tienes dificultades para encontrar algo útil, ten cuidado: el framework que estás tratando de aprender podría ser nuevo, o aún no haber sido adoptado por la comunidad.

Aunque mencioné que la documentación sola no es suficiente, hay excepciones a esto. EmberJS, por ejemplo, tiene gran documentación. Las características principales y los casos de uso están muy bien descritos con ejemplos genéricos aquí y allá. Lamentablemente, además de la documentación, nos quedan pocos libros de recursos, cursos de video u otros materiales.

Por otro lado, hay una gran cantidad de recursos para Angular y Reaccionar. Casi cualquier sitio web educativo orientado al front-end tendrá un artículo o dos sobre ellos, tal vez incluso un video curso o libro completo.

El tipo de Vue toca fondo: tiene buena documentación y hay algunos buenos cursos entre los que puede elegir.

Aurelia, por ejemplo, tiene casi cero recursos; la única esperanza para ti es documentación y suerte.

Prefiero tener opciones.

Incluso si lee un gran libro o curso, existe la posibilidad de que aprenda algo nuevo al exponerse a diferentes recursos. Si está familiarizado con el tema, a menudo puede hojear y buscar posibles áreas que aún no están del todo claras.

Desafortunadamente, esta estrategia no funcionará si estás limitado con tus opciones, lo que nos lleva al siguiente punto.

Popularidad

Puede enorgullecerse de aprender algo exótico, pero si observa esto desde una perspectiva comercial, no es lo mismo. Su empresa o cliente probablemente prefiera un conjunto de herramientas probado en batalla para ser utilizado.

Hay varias razones para esto. Si un framework no es tan popular, significa que hay algunos desarrolladores que se especializan en él. ¿Qué sucede si abandonas el proyecto o encuentras un nuevo trabajo? Su empleador termina atascado en la búsqueda de un desarrollador que conozca el framework que utilizó.

Este proceso puede convertirse en una carga real para una empresa. Lo mismo es válido incluso si te quedas con el proyecto y crece. Ahora el empleador necesita más desarrolladores para acelerar el desarrollo.

Hay otras razones personales por las que puede optar por un framework popular y ampliamente utilizado. ¿Qué sucede si te encuentras atascado con algún problema y no hay realmente una comunidad a la que puedas pedir ayuda? Ya que está solo con la documentación, es probable que pierda mucho tiempo.

Además de eso, desea pensar en oportunidades futuras más atractivas en su carrera. Si te especializas en algo popular y te haces muy bueno, habrá muchos proyectos para ti.

Los líderes obvios aquí son Angular y Reaccionan.

La mayoría de los listados de trabajos relacionados con el front-end requieren uno u otro. Están respaldados por Google y Facebook, respectivamente, y por lo tanto, los empleadores se sienten “seguros” sobre su elección.

A veces, la elección del framework para tu empresa o cliente no depende de usted; tal vez fue hecho por un empleado anterior u otra persona en el equipo. Lo más probable es que sea angular o reaccione. Ahora hay otras opciones, como Ember y Vue. Pero, tienes que buscar deliberadamente compañías que los usen.

Puede determinar la popularidad de un framework analizando rápidamente qué tan bien está funcionando el proyecto en GitHub y en otros lugares. Aquí hay algunas estadísticas recopiladas al momento de escribir este artículo:

	Angular 2	React	Ember	Vue
Stars on GitHub	26,924	73,530	18,154	63,438
Contributors on GitHub	495	1044	679	122
Tagged questions on StackOverflow	66,152	54,158	21,651	8,598

Aunque estas bibliotecas han existido durante el tiempo suficiente como para demostrar que son opciones populares, si está intentando algo realmente nuevo, las estadísticas similares pueden ayudarlo a tomar una decisión.

Aprender sólo Angular o React solo te llevará tan lejos en tu carrera. Por supuesto, tendrá muchas oportunidades, pero hay una razón por la que existen otros frameworks. Intenta aprender sobre ellos en tu tiempo libre y ocasionalmente haz algunos experimentos. Incluso si nunca los usa en proyectos reales, obtendrá valiosos conocimientos que lo ayudarán en su trabajo diario de desarrollo.

Funciones principales

Vamos a ponernos un poco técnicos ahora.

Al principio, desea hacer una breve descripción de las características principales del framework para tener una expectativa adecuada cuando comience a codificar. Para ello, escanee la documentación. Necesita tener una idea de lo que trata este framework en general. ¿Es solo una capa de visualización, completamente desarrollada o algo intermedio?

Si tienes una amplia experiencia previa con otros frameworks, este proceso es fácil y rápido. Busca los siguientes temas en la documentación: creación de plantillas, administración de estado, comunicación HTTP, procesamiento y validación de formularios, y enrutamiento. Esas son cosas de todos los días que haces como desarrollador. No todos estos pueden presentarse en el framework central, o puede haber un enfoque diferente para un problema en particular.

Toquemos las opciones populares brevemente.

Comenzaremos con Reaccionar y Vue. No son realmente frameworks; sólo representan la capa de vista de su aplicación. Significa que todas las otras partes — comunicación HTTP, validación de formulario, etc .— dependen de usted.

Como mencioné anteriormente, podría ser una espada de doble filo. Eventualmente, terminará construyendo su propio framework personalizado. Ambos tienen su ecosistema de bibliotecas para proporcionar soluciones a los problemas más comunes, pero la estructura general variará de un proyecto a otro.

El JSX de React siempre me hizo encogerme. Tenía que acostumbrarme a eso. Sin embargo, la creación de plantillas de Vue es realmente agradable, especialmente si vienes de Angular.

Por otro lado, Ember tiene casi todo. Sorprendentemente, el núcleo de Ember no proporciona procesamiento de formularios avanzado. Solo tiene algunos ayudantes de entrada y eso es todo. Es muy obstinado e incluso tiene su propia capa de datos. Todo tiene que hacerse “de la manera Ember”.

Si tienes antecedentes en otros frameworks o JavaScript en general, puedes sentirse frustrado porque Ember usa su propio modelo de objetos. Las clases estándar de ES2015 no se usan ampliamente, como lo indica su documentación. Puede encontrar que asigna el valor directamente a una propiedad y Ember se queja de ello.

Otra cosa significativamente diferente de otros frameworks es Ember Data. Es una capa de datos para aplicaciones Ember. Puedes pensarlo como algún tipo de ORM para el front-end. Usted crea modelos y mapea las relaciones entre ellos.

Ahora, si su servidor usa API JSON (es una especificación para implementar API JSON), se encuentra en un buen lugar con Ember, pero desafortunadamente, la mayoría de los servidores no. Por lo tanto, debe escribir adaptadores y serializadores personalizados. Sin embargo, si haces las cosas al estilo Ember, puede ser muy productivo. Simplemente tiene una curva de aprendizaje empinada.

Angular 2 es un framework rico en funciones. Se envía con muchos módulos como Ember, por lo que tiene un montón de herramientas a su disposición de la caja. Sin embargo, como Angular está destinado a aplicaciones de gran tamaño, promueve TypeScript, que podría desencadenar cierta resistencia antes de intentarlo.

Otra cosa notable es el uso intensivo de observables de la biblioteca Rx, que es realmente agradable. Puede representar casi cualquier cosa como observable y aplicar operaciones de alto nivel como mapa, filtro, etc. Si usó Lodash o Underscore, Rx es similar a los esteroides.

Aquí hay un resumen de las características principales de los cuatro frameworks que estamos discutiendo en este artículo:

	Angular 2	React	Ember	Vue
View/Templating	✔	✔	✔	✔
Router	✔	✔	✔	✔
Form processing	✔		✔
Form validation	✔
HTTP communication	✔		✔

Todas esas características que resumimos brevemente son inútiles si necesita quemar la vela en ambos extremos para usarlas efectivamente, que es el siguiente punto.

Usabilidad

Si en este momento todavía tienes entusiasmo por el framework elegido, el siguiente paso es ensuciarse las manos.

Tal vez el framework es una buena opción para ti debido a tu formación. Tal vez es un poco diferente y te reta de alguna manera. Aún no lo sabes, y ninguna cantidad de tutoriales de lectura o observación lo ayudará hasta que lo pruebe ti mismo.

La mejor forma de familiarizarse con un framework es utilizarlo en algún mini proyecto. Esto te brinda la oportunidad de resolver problemas cotidianos mencionados anteriormente con un framework dado.

Mientras trabaja en un proyecto, tómese su tiempo y reflexione si está siendo productivo o no. ¿Qué tan fácil es lograr el resultado deseado? ¿Tienes que buscar bibliotecas externas? Tal vez necesites algunos complementos de la comunidad. ¿Hay alguna estructura o directrices convencionales dentro del contexto del framework? Tal vez haya una CLI para acelerar el proceso de desarrollo. En este paso, está reuniendo experiencia básica para que pueda pensar cómo sería si usa este framework para próximos proyectos o incluso transición de los existentes.

Ember se considera un framework muy productivo, al menos para sus usuarios principales. Viene con un CLI, que realmente ayuda. Puede generar rutas, controladores, componentes y modelos con sus propios conjuntos de prueba. Hacer todo eso manualmente es una tarea tediosa. Generar un nuevo proyecto también es posible. Creará la estructura de carpetas básica, instalará los paquetes necesarios, las herramientas de compilación, el entorno de prueba, etc. Si nunca ha utilizado una CLI en esa medida, estará muy satisfecho. Pero, como mencioné antes, Ember es muy obstinado; a pesar de toda esa bondad, puede encontrarse frustrado al tratar de realizar tareas comunes.

Ahora, para React y Vue, tienen algún tipo de CLI, create-react-app y vue-cli. Pero además de generar un proyecto inicial con algunas opciones, no ofrecen mucho en comparación con Ember o Angular. Es comprensible ya que ambos representan una capa de vista. Si le gustan los flujos de trabajo personalizados, la experimentación o las diferentes estructuras de proyecto a proyecto, entonces se encuentra en un buen lugar. Para algunos desarrolladores, la flexibilidad es la clave que inherentemente viene con el uso de React o Vue.

Angular 4 viene con un CLI como lo hace Ember. Puede generar componentes, directivas, servicios, etc. También genera la estructura inicial para una aplicación, por lo que solo debe preocuparse por el producto. El entorno de prueba es muy bueno ya que, con cada aplicación generada, el banco de pruebas vive cerca de él (literalmente). Además de eso, TypeScript podría proporcionar un impulso de productividad real. Este es el por qué:

¿Cuántas veces has encontrado el código con líneas como esta …

function doSomething(someData) {
    // do something
}

… y se preguntó qué diablos es ‘someData’, qué propiedades debería tener, qué funciones debería proporcionar y cuál es su comportamiento. Con TypeScript, usted define el tipo y espera los datos apropiados. Puede ir más allá si usa algún IDE con soporte de TypeScript. Puede explorar diferentes partes de la aplicación en un abrir y cerrar de ojos.

No hemos abordado los IDE pero, para la mayoría de los frameworks populares, existen algunos complementos que hacen que el desarrollo sea realmente fácil. WebStorm, por ejemplo, se envía con soporte integrado para Angular, React y Vue.

Facilidad de integración (con otras bibliotecas)

Por último, pero no menos importante, esto podría considerarse como parte de la usabilidad, pero es tan importante que merece su propia sección.

No importa qué tan rico en funciones tenga el framework seleccionado, es probable que se enfrenten a problemas donde se necesitan herramientas adicionales. Hay excelentes bibliotecas enfocándose en un problema, ya sea manipulación de DOM, procesamiento de datos, formateo de tiempo, edición de texto enriquecido, etc. Si intentas integrar una de ellas y dedicar horas cada vez, quizás esa no sea la mejor opción.

Probando esto es muy fácil. Puede encontrar rápidamente un escenario imaginario donde necesite una determinada biblioteca. Mira tus proyectos pasados; ¿Qué herramientas has estado usando y en qué escenarios? Lo más probable es que se encuentre nuevamente en las mismas situaciones y quiera estar preparado para eso, o al menos tener una expectativa.

No todas las bibliotecas admiten TypeScript. Como Angular lo usa en gran medida, algunas de las bondades de TypeScript podrían desaparecer al usar dicha biblioteca. Por supuesto, puede encontrar una solución, pero es un poco más complicada. Debido a la popularidad Angular, puede integrar las instrucciones en la página de la biblioteca en sí.

Para Vue y React, usted es responsable de casi todo, y el uso de otras bibliotecas no es una excepción. Si usa Webpack o una herramienta de compilación similar, puede consultar directamente las bibliotecas instaladas mediante NPM. Me parece un poco molesto para Vue el uso de complementos de la comunidad, especialmente cuando también contienen la lógica de la interfaz de usuario.

Ember tiene EmberObserver, que es un sitio web de complementos de la comunidad. Cada uno de ellos tiene un puntaje en una escala de cero a diez. Es un gran lugar para buscar algo que necesita. Si escribe el nombre de sus bibliotecas favoritas, como Lodash, Rx o Ramda, encontrará los complementos relacionados de envoltorios simples para completar las reescrituras. Por supuesto, hay repositorios Awesome React y Awesome Vue que reúnen recursos relacionados. incluyendo bibliotecas, pero encontré que EmberObserver es especialmente útil.

Comprometerse con un framework de JavaScript

Elegir el framework de JavaScript correcto es uno de los pasos más importantes para hacer que su proyecto web sea un éxito. Ya sea que esté trabajando en un proyecto pequeño o uno grande, ya sea que trabaje solo o en equipo, cada uno de estos detalles juega un papel crucial para determinar qué framework es el mejor para su proyecto (y menos de qué framework prefiere )

En cuanto a las características principales y la usabilidad, he enumerado los puntos que afectarán la productividad de los desarrolladores en diversos grados. La usabilidad es especialmente complicada porque depende en gran medida de su experiencia y antecedentes, así como de la empresa u organización en la que esté trabajando.

Con el tiempo, los frameworks que hemos discutido en este artículo pueden evolucionar, sus opiniones pueden cambiar y los proyectos para los que son adecuados pueden cambiar, pero este artículo debería brindarle una idea general de dónde cada uno de estos frameworks puede funcionar mejor.

Familiarizándose con el Plugin de Sketch de Desarrollo

Este articulo fue escrito por Manuele Capacci. Originalmente publicado en Toptal.

Las herramientas de diseño mejoran constantemente, y cada día entran más en el mercado (InVision Studio, por ejemplo). Dicho esto, las herramientas de diseño modernas como Sketch se crean para ser minimalistas, donde la herramienta se establece para eliminar todas las características no esenciales. Es típico crear funcionalidades adicionales solo cuando sea necesario, y aquí es donde entramos en el interesante mundo del desarrollo del plugin Sketch.

Desarrollar plugins de Sketch puede ayudar a los diseñadores a adoptar el aspecto técnico de cómo Sketch realmente funciona y darles la posibilidad de automatizar las tareas repetitivas. Los complementos de croquis están hechos con código y Sketch JavaScript API, pero como los diseñadores no necesitan ser desarrolladores expertos para usar esta API, este tutorial demuestra cómo codificar un complemento para simplificar un proceso de diseño y mejorar el flujo de trabajo en Sketch.

Complementos de bosquejo simples pero muy útiles

Muy a menudo, los diseñadores de bocetos tienen instalados al menos tres o cuatro complementos de Sketch. Los complementos a continuación son de naturaleza algo básica, pero se usan comúnmente porque ahorran mucho tiempo.

• RenameIt (cambia el nombre de varias capas a la vez)
• Sort Me (ayuda a reordenar las capas de una manera lógica)
• UnsplashIt (recupera imágenes de Unsplash)
• Content Generator (genera nombres falsos y otros datos “reales”)

Si tienes curiosidad por ver qué se puede lograr con los complementos de Sketch, echa un vistazo a nuestra lista definitiva de 50 complementos de Sketch.

El plugin RenameIt es un popular plugin de Sketch que ayuda a los diseñadores a cambiar el nombre de varias capas a la vez.

Aspectos básicos de JavaScript en menos de 2 minutos

Antes de comenzar a codificar, tendrás que aprender algunas cosas sobre la sintaxis de JavaScript (es decir, la formalidad de cómo se escribe el código). Esto no solo te ayudará a escribir el código de tu plugin de Sketch, sino que comprenderás mejor cómo y por qué funciona el código.

Comentarios

Comencemos con los comentarios del código.

Los comentarios de código son como notas ocultas: no están orientados al usuario y, por lo tanto, no se mostrarán en el complemento de Sketch resultante. Los desarrolladores suelen utilizar estos comentarios de código para explicar el código que se ha escrito, por lo que si otro desarrollador lee el código o si vuelven al código más adelante, comprenderán qué se ha escrito y cómo funciona.

// this is a single-line comment

/*
    This is a 
    multiline comment
*/

Variables

Las variables son como pequeños contenedores que se usan para almacenar valores; por ejemplo:

var firstName = "Manuele Capacci";
// the variable firstName now equals "Manuele Capacci"

Para recuperar este valor, debe usar la variable; por ejemplo:

log(firstName);
// esto grabará "Manuele Capacci" en la consola

La ventana de scripting Destacado: la consola, que se usa para probar la salida.

Objetos

Los objetos pueden almacenar múltiples variables, como esta:

var user = {
    firstName: "Manuele",
    lastName: "Capacci",
    age: 28,
    role: "Product Designer"
}

Observa que el valor `age ‘no está entre comillas. Esto se debe a que las citas definirán la variable como una cadena, lo que significa que la salida prevista debe ser literal. No queremos eso; queremos que la variable se defina como un número entero para que podamos realizar operaciones matemáticas en él. Poner comillas alrededor del valor definirá indeseablemente el valor como una cadena.

Podemos usar las variables del objeto, como esta:

// using the object's variables
user.firstName;
user.lastName;
user.age;
user.role;

Arrays

Las matrices son un tipo de objeto más simple:

var users = ["Manuele", "Daniel", "Miklos"]
// "users" is an array that contains a list of names

user[0]; // this equals "Manuele"
user[1]; // this equals "Daniel"
user[2]; // this equals "Miklos"

Funciones

Las funciones son accionables — ellos hacen algo. En el ejemplo siguiente, la función calcula la suma de ay b. En este ejemplo, a es 2 y b es 3.

// a function declaration
function sum(a, b) {
    return a + b;
}

// calling the function
sum(2, 3); // this equals 5

// recapitulando lo que hemos aprendido hasta ahora

var total = sum(2, 3); // la variable "total" será igual a 5
log(sum(2, 3)); // esto dará como resultado 5 en la consola
log(total); // esto también dará como resultado 5 en la consola

Declaraciones condicionales

Los enunciados condicionales solo ejecutan el código dentro de sus corchetes si se cumple la condición especificada. En el ejemplo siguiente, el código se ejecuta de inmediato porque el valor de firstName de hecho es igual a “Manuele”; por lo tanto, el código else if yelse no se ejecuta.

var firstName = "Manuele";

if(firstName == "Manuele") {
    // hacer algo por Manuele
} más  si(firstName == "Daniel") {
    // haz algo por Daniel
} más {
    // hacer algo por alguien más
}

Tratemos de escribir un código básico en Sketch.

Escribir tu primera línea de código en Sketch

Navegue a “Complementos → Ejecutar script” en Sketch. En esta ventana de creación de scripts, puede escribir código para hacer que las cosas sucedan en Sketch (como cambiar el nombre de las capas) y luego, empaquetar este código en un complemento de Sketch con .sketchplugin filetype.

Abajo: Así es como se ve la ventana de scripting la primera vez que la abre. Es posible que veas algún código con el que no estés familiarizado, pero aprenderás un poco más sobre JavaScript en el camino. El código predeterminado que ya existe en esta ventana le dice el nombre del documento de boceto, qué capas están actualmente seleccionadas y más.

Por ahora, borre todo el código en esta ventana y reemplácelo por:

log("Hello Sketch");

Lo que estás haciendo aquí es llamar a la función log y pasar la cadena Hello Sketch como argumento. Este registro solo es accesible entre bastidores, lo que lo hace útil para depurar código cuando las cosas no funcionan como se esperaba. Si hace clic en el botón “Ejecutar”, el argumento Hello Sketch se registrará en la consola debajo de la ventana de scripting.

Vamos a cavar un poco más profundo.

• 
• 
• 

Creación de un complemento para cambiar el nombre de la capa de boceto

Ahora puede usar su conocimiento de scripting JavaScript y Sketch para crear un script que cambie el nombre de varias capas a la vez. Rodrigo Soares creó el plugin RenameIt, que logra lo mismo y guarda designers a mucho tiempo — creemos una versión simplificada. Asegúrate de crear algunas capas de boceto para que pueda probar su secuencia de comandos.

El código debe comenzar con una línea repetitiva. Necesita usar la Interfaz de Programación de Aplicaciones (API) de Sketch — este es un término elegante para un objeto especial que necesitará si desea interactuar con Sketch de manera significativa. Nombra este objeto especial de API sketch.

Obviamente, solo cambie el nombre de las capas actualmente seleccionadas. ¿Cómo averiguas qué capas están actualmente seleccionadas? La API de Sketch JavaScript proporciona una forma práctica de obtener esta información con solo una línea de código.

A continuación se explica cómo lograr todo esto con el código JavaScript:

// asignar el objeto API a una variable
var sketch = context.api();

// asignar capas actualmente seleccionadas a una variable
var selection = sketch.selectedDocument.selectedLayers;

Toda la información sobre las capas seleccionadas actualmente está contenida dentro de la variable selection. Ahora solo necesitas “iterar” (repetidamente ejecutar algún código) sobre las capas para cambiarles el nombre.

Por el bien de la prueba, cambia el nombre de cada capa a “Redenominada Layer”.

Agrega este código al final de tu script:

selection.iterate(function(layer) { // for every selected layer
    layer.name = "Renamed Layer"; // rename to "Renamed Layer"
})

Una vez que pulses “Ejecutar”, verás que cada capa ha sido renombrada como “Capa renombrada”, pero para que al usuario se le pregunte cuál debería ser el nombre de la nueva capa. Adaptemos el script:

// pregunta al usuario cuál debe ser el nuevo nombre de la capa
var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', '');

selection.iterate(function(layer) { // for every selected layer
    layer.name = newLayerName; // rename to the value of newLayerName
})

Aparecerá una ventana emergente pidiéndole al usuario que especifique un nuevo nombre para las capas.

Si no estás seguro de cómo acceder a ciertos contextos, como las capas actualmente seleccionadas, o cómo revelar un cuadro de entrada de usuario (como en los escenarios anteriores), puede leer el documento oficial Sketch developer documentation, que le mostrará qué código se requiere.

Cuando estés listo para continuar, presiona el botón “Guardar …” en la esquina inferior izquierda de la ventana de secuencias de comandos y asigne un nombre al guión. Ahora encontrarás este complemento de Sketch accesible desde el menú Sketch en “Complementos”, igual que con todos los demás complementos de Sketch.

Cambiar el nombre de las capas en boceto: el código completo

var sketch = context.api();
var selection = sketch.selectedDocument.selectedLayers;

// pregunta al usuario cuál debe ser el nuevo nombre de la capa
var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', '');

selection.iterate(function(layer) { // para cada capa seleccionada
    layer.name = newLayerName; // renombrar al valor de newLayerName
})

Creación de un complemento de bosquejo “Seleccionar todas las capas en un grupo”

Ahora vamos a crear algo un poco más complejo. El siguiente complemento de Sketch seleccionará automáticamente todas las capas dentro de un grupo, que luego podrá adaptar para incluir solo capas de texto, o solo capas de formas, o incluso podría detectar automáticamente el tipo de capa y solo seleccionar capas de ese tipo.

Como anteriormente, comencemos definiendo el contexto. Luego puedes iterar/repetir sobre las capas dentro de ese contexto y seleccionarlas automáticamente.

var sketch = context.api();
var selection = sketch.selectedDocument.selectedLayers;

selection.iterate(function(layer) {
    if(layer.isGroup) { // solo ejecuta el siguiente código si la selección es un grupo
        layer.iterate(function(innerLayer){ // para cada capa en el grupo
            innerLayer.addToSelection(); // agregarlo a la selección
        });
        layer.deselect(); // deseleccionar el grupo
    }
});

Con este código, se seleccionarán todas las capas dentro de cualquier grupo seleccionado actualmente (siempre que se seleccionen algunas). Mientras tanto, los grupos mismos serán de seleccionados.

Para refinar aún más esta secuencia de comandos, puedes incluir una declaración condicional que comprueba si la capa es de un tipo específico. Digamos que desea seleccionar específicamente todas las capas text en un grupo — para hacer eso, en cada iteración, verifique el tipo de capa de cada capa, así:

if(innerLayer.isText) {
    innerLayer.addToSelection();
}

Seleccionar todas las capas de texto en un grupo: el código completo

var sketch = context.api();
var selection = sketch.selectedDocument.selectedLayers;

selection.iterate(function(layer) {
    if(layer.isGroup) { // solo si la selección es un grupo
        layer.iterate(function(innerLayer){ // para cada capa en el grupo
            if(innerLayer.isText) { // solo si la capa es una capa de texto
                innerLayer.addToSelection(); // agregar a la selección
            }
        });
        layer.deselect(); // deseleccionar el grupo
    }
});

Puede mejorar este script de varias maneras, utilizando la documentation como referencia:

• Permitir al usuario seleccionar solo formas
• Permitir al usuario seleccionar solo imágenes
• En caso de que no se seleccione un grupo, automáticamente seleccione grupo principal , lo que permite al usuario seleccionar capas de un tipo similar
• Si el grupo tiene grupos anidados dentro de él, procese de la misma manera

Conclusión

Si tienes curiosidad acerca del desarrollo de complementos de Sketch que otros diseñadores pueden usar, eche un vistazo a SKPM (Administrador de complementos de bocetos). SKPM permite a los diseñadores empaquetar sus complementos en el formato de archivo .sketchplugin, que hace que el complemento sea instalable. Durante este proceso, los desarrolladores de complementos también pueden definir atajos de teclado para las acciones del complemento.

Un diseñador que sabe cómo codificar los complementos de Sketch es un diseñador que sabe cómo mejorar su flujo de trabajo y trabajar más rápido cuando es necesario, liberando más tiempo para gastar en la entrega un producto final de alta calidad. No solo eso, sino que aprender cómo funciona Sketch detrás de escena es una excelente oportunidad para sumergirse en el mundo de JavaScript.