Al invertir, existe el concepto de "malo ahora, bueno entonces". El inversor mordisquea regularmente el 10, 20% o incluso el 30% de sus ganancias para el futuro. Invierte este dinero en bonos, acciones, OFZ, ETF, que lo vale mucho. Ahora, en el momento, el inversor le está quitando sus ganancias, se está privando de algunos beneficios, de modo que en el futuro, en el horizonte de 10-20 años, se beneficiará de las inversiones. Las ganancias en el futuro cubrirán las dificultades de hoy. Aproximadamente la misma estrategia profesada por
Alexei Okhrimenko (
obenjiro ), pero con respecto al desarrollo: es mejor perder un día y luego volar en 5 minutos.
FuenteEn
Frontend Conf 2018, Alexey contó cómo, habiendo perdido mucho tiempo ahora, en última instancia, guárdelo más tarde. Este informe no trata sobre una sensación de aburrimiento y no sobre cómo lidiar con tareas monótonas y rutinarias, sino sobre cómo
pasar el tiempo al máximo : cuánto es, gastar todo y ver qué sucede. La transcripción del informe es la experiencia de escribir herramientas para la depuración, prueba, optimización, andamiaje y validación para diferentes proyectos. Como beneficio adicional, Alexey hablará sobre una serie de herramientas existentes y los beneficios que aportan. Averigüemos si necesita perder tiempo en esto.
Sobre el orador: Alexei Okhrimenko es desarrollador en Avito Frontend Architecture, donde mejora un poco la vida de millones de personas. Dirige el podcast
"5 min Angular" , y en su tiempo libre desde el sueño y el podcast, organiza
Angular Meetup junto con los chicos de Tinkoff, y realiza una gran cantidad de
informes diferentes y
controvertidos .
¿Dónde puedo perder el tiempo?
El paso cero es comprar una Mac / iMac e inmediatamente comenzar a perder tiempo, o poner Linux en una computadora portátil y perder todo el tiempo de trabajo en ella, cambiando las configuraciones. También recomiendo comenzar con Gentoo.
Hay 8 puntos en los que podemos pasar el tiempo.
- Terminal
- Diseño.
- Crea un proyecto.
- Generación de código.
- Código de ortografía
- Refactorización
- Pruebas
- Depuración
Procedemos a una pérdida sólida comenzando en orden.
Terminal
¿En qué parte de la terminal podemos pasar nuestro tiempo para perderlo todo?
Organice su espacio de trabajo : cree carpetas "Mi trabajo", "Mis proyectos de pasatiempo" y coloque todo en ellos. Configure
Homebrew para instalar software adicional que se mencionará.
Coloque
iTerm2 y el terminal predeterminado en Mac:
deséchelo .
Instale complementos como
oh-my-zsh , que vienen con un montón de complementos geniales.
Entregue
tmux - terminal multiplexor. Este es un programa para el terminal, que le permite abrir varias ventanas en una sola ventana y además admite la sesión. Por lo general, si cierra el terminal, todo se rompe y termina, y tmux continuará funcionando, incluso si lo apagó. Si nunca he trabajado con tmux, recomiendo una
revisión de DBMS Studio .
Prescribe alias . Cada vez que escribes algo más de una vez en la terminal, escríbete un alias, te será útil. Dos veces, ya mucho, seguramente habrá un tercero, sexto y décimo.
Entregue herramientas adicionales, por ejemplo,
jmespath o en
forma abreviada - jp. Se puede instalar a través de brew y hacer interesantes solicitudes de consulta en archivos JSON.
brew tap jmespath/jmespath brew instal jp
Por ejemplo, si ha empaquetado archivos JSON, puede revisar todo y descubrir qué versiones de React en sus aplicaciones y proyectos.
Automatice su trabajo: ¡no abra los mismos archivos muchas veces!
Ahora hablemos sobre dónde gastarlo todo. Todo lo anterior es una pequeña pérdida de tiempo, puede perder más en Shell Scripts.
Script de Shell
Es un lenguaje de programación, principalmente para bash, con su propia sintaxis.
#!/bin/bash for dir in 'ls $YOUR_TOP_LEVEL_FOLDER'; do for subdir in 'Is $YOUR_TOP_LEVEL_FOLDER/$dir' do $(PLAY AS MUCH AS YOU WANT); done done
El lenguaje está lleno: algunas personas crean juegos y servidores web, lo que no aconsejo hacer. Recomiendo todo el trabajo que tomó el tiempo para gastarlo nuevamente y escribirlo completamente en el archivo. Por qué Todos los desarrolladores familiares que han estado trabajando en la industria durante mucho tiempo simplemente crean su propio repositorio de GitHub para configuraciones y colocan la configuración allí para su TMUX - multiplexor de terminal, Shell Scripts para la inicialización.
¿Por qué dedicar tanto tiempo a lo que ya se ha hecho una vez? Luego, cuando cambie a otro trabajo, cambiarán su computadora en el trabajo, la placa base se quemará y pasará un día o dos o tres nuevamente para configurar el
entorno . Cuando tenga un repositorio de este tipo, la configuración e instalación solo tomará 10 minutos.
Diseño
Por lo general, todos están muy inspirados a la vez: “¡Sí, diseño! ¡Diagramas UML! ”, Pero cuando digo la palabra UML en voz alta, muchos programadores familiares notan:
- ¿En 2018? ¿Qué te pasa? UML es una terrible reliquia del pasado. ¿Por qué estás desenterrando un cadáver? ¡Suelta la pala!Pero UML es muy útil. Por ejemplo, en una reunión de Scrum, un desarrollador de Java escucha mientras los programadores de Python discuten la arquitectura de características de back-end. Se frota la cabeza con tristeza y se da cuenta de que no entiende nada, sino que simplemente pierde una hora de su tiempo. Un desarrollador de Java no puede interactuar con los programadores de Python: no dirá cómo escribir código, usar clases, mixins o cualquier otra cosa. Él simplemente no está involucrado en el asunto. Nuestra empresa tiene JavaScript, Python y Lua. En este momento, 2/3 de las personas están aburridas: primero una 2/3, luego otras. UML resuelve este problema.
UML es un lenguaje visual abstracto universal para el diseño de sistemas, que le permite ignorar las características de los idiomas.
Daré dos de mis ejemplos favoritos.
Diagramas de secuencia
Estos diagramas ayudan a mostrar el historial de interacción a lo largo del tiempo.
En el eje vertical Y, una dependencia temporal disminuye: primero recibimos una solicitud de autenticación, luego damos una respuesta y luego colocamos algo en los registros. En el eje horizontal X ya existe una interacción directa entre los personajes, participantes en algún evento.
Personalmente, uso periódicamente
diagramas de secuencia para describir la autenticación de procesos en las aplicaciones. Al hacerlo, yo, un desarrollador de JS, encuentro un lenguaje común con el backend de Python, Lua y Java. Todos nos entendemos y sabemos cómo funcionará el código como resultado, y no nos preocupamos por la implementación específica de este o aquel lenguaje.
Diagrama de clase
Estos cuadros también son muy útiles. JavaScript tiene clases, ¿cuál es el punto de los diagramas? Pero existe TypeScript, y con él puede obtener interfaces, clases abstractas, una representación completa de la arquitectura final.
Un minuto de diseño ahorra una semana de codificación.
PlantUML
Yo uso la biblioteca
PlantUML Java. Con él, puede usar algunos dsl complicados, en los que, por ejemplo, indica que List se hereda de AbstractList, Collection from AbstractCollection, así como interacción, agregación, propiedades, interfaces y todo lo demás.
@startuml abstract class AbstractList abstract AbstractCollection interface List interface Collection List <|— AbstractList Collection <|— AbstractCollection Collection <|— List AbstractCollection <|— AbstractList AbstractList <|— ArrayList class ArrayList { Object[ ] elementData size() } enum TimeUnit { DAYS
Como resultado, obtengo el diagrama final.
Todo esto funciona bien, hay complementos para Visual Studio Code.
Hay otra aplicación interesante.
StarUML
Dibujamos el diagrama más simple: hay una clase base de la cual se hereda la clase de prueba.
Luego usamos
StarUML . No es demasiado caro y puede exportar a Java. No existe una herramienta que exporte diagramas UML a código TypeScript, pero podemos exportar simplemente usando StarUML a código Java.
Jsweet
Luego aplicamos
JSweet , una biblioteca que le permite convertir código Java a código TypeScript o JavaScript.
Código Java ...
import java.until.*; public class BaseClass { public BaseClass(){ } protected String baseAttribute; }
... usando JSweet convertir a código TypeScript:
class BaseClass { public constructor) { this.baseAttribute = null; } baseAttribute : string; } BaseClass["_class«] = «BaseClass»;
Aquí hay un parámetro adicional
_class : esta es una característica de Java, se puede eliminar. Como resultado, obtuvimos una plantilla estándar de código TypeScript a partir de diagramas, una base en la que puede trabajar. Además, esta base está diseñada y clara para todos.
Pasar tiempo diseñando UML definitivamente vale la pena.
Creación de proyectos
¿Quién configura Webpack cada vez y crea webpack-config en un nuevo proyecto: chicos, qué les pasa? ¿Está todo bien? ¿Necesitas ayuda? Si lo retienen como rehén, escriba las coordenadas en los comentarios y le enviaremos un helicóptero de rescate.
La forma más fácil de evitar esto y no configurar lo mismo cada vez es
crear un repositorio común en GitHub localmente o elevar GitLub CI, clonar este repositorio, entrar y eliminar la carpeta git.
git clone something cd something rm -rf .git
Ahora tenemos un proyecto de referencia del cual estamos clonando. Con este enfoque, puede obtener
bootstrapping muy barato.
Yeoman - en desuso. Slush - obsoleto
Que
Yeoman en desuso es demasiado arrogante. No está en desuso, solo cada vez menos, como
Slush . Estas son dos herramientas idénticas, solo que con una base diferente:
Yeoman es Grunt y generación de código. Slush es Galp y generación de código .
A pesar de que las herramientas son interesantes, ahora otras se usan con más frecuencia.
CLI angular, Crear aplicación de reacción, Vue CLI
Quién trabaja con Angular: use la CLI angular. Crear aplicación React: quién trabaja con React. Vue CLI - fanáticos de Vue.JS.
La mayoría ya se ha mudado a estas herramientas. Uno de los principales argumentos por los que vale la pena trabajar con la CLI es la
uniformidad . Si olvidó tomar su proyecto usando la CLI, está seguro de que la persona que viene después de usted conocerá la estructura del proyecto: equipos, características, que puede ejecutar de principio a fin y pruebas unitarias. Estas herramientas son muy buenas.
¿Vale la pena pasar tiempo en proyectos de arranque utilizando la CLI, en lugar de Yeoman? Si, no lo dudes.
Generación de código
Tenemos una cierta base de código. Por lo general, cuando comenzamos un proyecto, primero creamos Enrutamiento y luego Redux: ¿cómo podemos prescindir de él? Cada marco tiene una herramienta de generación de código especializada. En Angular, esto es
CLI Schematics . Vue CLI tiene una sección separada para generar
complementos de Vue CLI : puede
generar algo de código para nuestros proyectos en la sección de complementos.
Redux CLI
Quiero centrarme en la CLI de React y Redux, porque desde mi práctica, son los programadores de React los que menos participan en la generación de código y me duele mirarlo. Cada vez que las personas crean los mismos archivos y se quejan de que es difícil trabajar con Redux, debe crear un montón de todo. ¡Entonces ya hay herramientas!
Esta es la
CLI de Redux , que creará un archivo de acoplamiento para usted, en el que habrá efectos y reductores, y las acciones correspondientes, componentes "estúpidos" y componentes "inteligentes". Además, puede generar sus componentes o base de código utilizando la CLI de Redux. La CLI de Redux se instala simplemente, puede crear un proyecto usándolo o inicializarlo en uno listo, por ejemplo, creado usando la aplicación Create React.
npm i redux-cli -g blueprint new <project name> blueprint init blueprint g dumb SimpleButton
Hay otra herramienta universal que no depende del marco:
Plop .
Plop
Me enteré de él recientemente. Plop hace lo mismo que el anterior: al inicializar esta herramienta, puede crear todos los componentes básicos necesarios. Indique en qué componentes está compuesta su aplicación y simplemente generarlos. Por lo tanto, no pierda el tiempo creando la base del código principal. Con una historia y especificación de usuario, puede generar funcionalidades básicas, pruebas, estilos básicos:
ahorre una gran cantidad de trabajo .
Tendrá que ajustar todas las herramientas: periódicamente sintonizo React Blueprint, hago mi biblioteca de componentes, pero
esta vez vale la pena .
Escritura de código
Habrá trivialidad.
Fragmentos de código
Los fragmentos de código le permiten escribir un pequeño fragmento, una palabra clave y obtener una funcionalidad lista para usar. Por ejemplo, puede crear un componente angular escribiendo
@Component .
Para React y Vue, hay los mismos fragmentos de código.
Hay un problema con los fragmentos de código comunes. Cuanto más profesional es el desarrollador, menos usa fragmentos de código, simplemente porque ya sabe cómo está escrito todo y es demasiado vago para crearlos. Él ya recordaba cómo escribir este componente.
Permítame recordarle que
nuestro objetivo es pasar tiempo sin hacer nada útil. Por lo tanto, nos sentamos y escribimos fragmentos de código. Aquí puede pasar una cantidad de tiempo infinitamente grande y se logrará el objetivo.
Personalmente, los fragmentos fueron útiles cuando trabajé con
i-bem.js :
modules.define("button<i>«,</i> [«i-bem-dom»], function(provide, bemDom) { provide( bemDom.declBlock( this.name, { /* */ }, { /* */ } ) ); });
No hay nada complicado en esta declaración, pero la sintaxis no es ni angular, ni reaccionar, ni Vue, y es muy difícil recordarla las primeras cien veces. Ciento primero se recuerda. Me atormentaron, pasé mucho tiempo y luego comencé a crear en masa estos componentes simplemente porque usaba fragmentos de código.
Para aquellos que trabajan con WebStorm, esto no es muy útil, simplemente porque no tiene un ecosistema tan grande de complementos y, básicamente, todo está incluido inicialmente: este es un
IDE completo .
Extensiones VScode / Extensiones VIM
La situación con los editores de
Visual Studio Code y
VIM es diferente. Para obtener algún beneficio de ellos, debe instalar complementos. Puede pasar varios días para encontrar todos los complementos buenos e instalarlos, ¡hay muchos complementos!
Maté una increíble cantidad de tiempo buscándolos, lo cual te recomiendo. Puedes sentarte durante horas, mirarlos, mirarlos, hermosos gifs animados, ¡un milagro! Escribe en los comentarios si quieres que comparta todo lo que tengo.
Hay herramientas que resaltan automáticamente la complejidad del código, que pasan las pruebas, que no lo hacen, cuando puede ver la razón del error directamente en el código, qué código pasó o no, autocomplits, autoprefixes, todo esto en los complementos.
Aquí puede pasar mucho tiempo y lograremos nuestro objetivo. Por supuesto, los complementos no son un poco relevantes para escribir código, pero imagina que nos ayudan a escribirlo.
Refactorización
Este es mi tema favorito! Y tanto es así que tengo un informe separado sobre refactorización:
“Refactorización - ¿Dónde? A donde Cuando De donde Por qué ¿Por qué y cómo? Les cuento en detalle qué es y cómo trabajar con él.
Te advierto de
inmediato ,
refactorizar no es lo que sueles imaginar . Por lo general, esto significa: "Mejoré la base del código y agregué una nueva función". Esto no es refactorizar. Si tiene disonancia cognitiva en este momento, mire el informe y pasará.
AngularJS Grunt -> paquete web
Sobre la refactorización quiero contar una historia instructiva. Teníamos un proyecto AngularJS muy antiguo, que fue construido usando Grunt con concatenación banal. El proyecto fue escrito durante la primera y segunda versión de Angular. En consecuencia, todo fue muy simple allí: los archivos fueron concatenados, luego uglify, y eso es todo. En algún momento, nos dimos cuenta de que teníamos que mudarnos a Webpack. Tenemos una enorme base de código heredado: ¿cómo traducirlo a Webpack?
Hicimos algunas visitas interesantes. Primero, recurrieron a la biblioteca
lebab.io .
Lebab.io
Esta biblioteca le permite convertir código de ES5 a ES6, y muy bien. Ella toma la antigua base de código y la convierte en una nueva: inserta importaciones, usa nuevas líneas, clases, establece
let y
const correctamente, todo lo hace por usted. En este sentido, una muy buena biblioteca.
Instalamos este complemento,
ejecutamos el código del archivo a través de
Lebab.io . Después de eso, simplemente tomaron
plantillas de bigote y el código, que se veía diferente bajo los nuevos Angular 1.6 y 1.5 con un enfoque de componentes. Con la ayuda de los clientes habituales, sacamos las piezas necesarias, con la ayuda de Moustache, representamos nuestra plantilla de una manera diferente y pasamos por un ciclo a través de todos nuestros archivos.
var object_to_render = {key: «value», ...}; fs.readFile(path_to_mustache_template, function (err, data) { if (err) throw err; var output = Mustache.render(data.toString(), object_to_render); fs.saveFileSync(path_to_mustache_template); }):
Como resultado, convertimos una gran cantidad de código heredado en un formato moderno y Webpack rápidamente conectado. Para mí personalmente, la historia es muy instructiva.
Jsfmt
Esta es una herramienta que le permite formatear la base del código y buscarla no con una búsqueda regular, sino
semánticamente . Conectamos nuestra biblioteca, sistema de archivos, leemos el archivo y queremos encontrar algo. A continuación se muestra un ejemplo abstracto, actualmente estamos trabajando con Angular.
var jsfmt = require('jsfmt'); var fs = require('fs'); var js = fs.readFileSync('component.js'); jsfmt.search(js,"R.Component(a, { dependencies : z })").map((matches, wildcards) => { console.log(wildcards.z); });
Así es como se ve nuestra solicitud:
<b>R.Component</b> (a, { dependencies: z })
R/Component es su propia biblioteca
R y algunos
Component .
Esta parte se ve muy extraña:
R.Component<b> (<u>a</b></u>, { dependencies: <b><u>z</b></u> })
Esto no parece ser JavaScript válido, y lo es.
Insertamos letras pequeñas, como marcadores de posición, y le decimos a
Jsfmt que no estamos interesados en lo que hay allí: un objeto o una matriz, una cadena o un valor booleano, nulo o indefinido, no importa. Es importante para nosotros obtener enlaces a
a y
z , después de lo cual, cuando revisemos toda la base de código, encontraremos todas las variantes de
z . Por ejemplo, podemos encontrar todas las dependencias de este componente. Gracias a esto, puedes hacer refactorizaciones complejas.
Usando la herramienta, pude refactorizar una gran base de código con un enfoque semántico usando árboles y análisis.
No tuve que escribir consultas complejas, clientes habituales complejos o analizar un árbol de sintaxis. Simplemente formé una consulta e indiqué qué cambiar.
Dos herramientas adicionales
En la refactorización, hay una cosa simple que tengo que decir. Si desea refactorizar algo, en el Código de Visual Studio, seleccione el código, y habrá sugerencias y opciones de refactorización que están allí. Por ejemplo, un método de extracción, un método en línea.
WebStorm tiene un menú contextual que se puede llamar usando una combinación de teclas, dependiendo de la configuración, y la base del código reformado.
En general, WebStorm tiene más comandos; ahora está más desarrollado que Visual Studio Code.
Prueba
Ahora lo más interesante e inspirador :)
Selenio IDE
Primero una pequeña historia. De alguna manera, los probadores vinieron a mí y me dijeron:
- Escribimos pruebas de extremo a extremo, queremos automatizarlas y tenemos un Selenium IDE.El Selenium IDE es solo un complemento para Firefox que registra sus acciones en un navegador. Recuerda todos sus pasos: clics, desplazamientos, entradas, transiciones, y puede perder estos pasos nuevamente. Pero eso no es todo. Puede exportar lo que ha escrito, por ejemplo, en Java o Python, y ejecutar pruebas automatizadas de extremo a extremo utilizando Selenium IDE.
Suena genial, pero en realidad el Selenium IDE por sí solo no funciona perfectamente, y además, en ese momento todavía teníamos
ExtJs .
Extjs
Si tuvieras ExtJs, simpatiza y abraza. El Selenium IDE siempre escribe el selector más exclusivo. En nuestros elementos, esto es id. Pero ExtJs para cada elemento genera una identificación aleatoria, no sé por qué. Este problema con ExtJs viene con la versión cero.
ExtJS = <div id="random_6452"/>
Como resultado, nuestros evaluadores abrieron la aplicación por la mañana, registraron todo y luego,
sin volver a cargar la página , la ejecutaron periódicamente, tratando de entender si el backend, por ejemplo, se había roto. Actualizaron el backend, pero no tocaron la interfaz. Lo principal era no hacer clic en actualizar, porque después de eso se generó una nueva identificación.
Inmediatamente a los evaluadores se les ocurrió una idea brillante. Selenium IDE puede exportar sus registros a formato HTML. Podemos trabajar con HTML, tenemos motores de plantillas. ¡Intentemos hacerlo!
Extensión Google Chrome
Rápidamente creé una extensión de Google Chrome e inmediatamente encontré el método chic
elementFromPoint .
document.elementFromPoint(x, y);
Tristemente grabé el movimiento del mouse en la ventana y luego llamé a elementFromPoint, cuando el clic funcionó, encontré las coordenadas del elemento en el que hice clic. Además, era necesario crear un cierto selector, de alguna manera para seleccionar este elemento específicamente. Id no se puede utilizar, ¿qué hacer?
Se le ocurrió una idea: además, cuelgue un
ID de prueba especial en los componentes. Se creó una identificación de prueba abstracta para el componente, que solo se necesitaba para las pruebas.
data-test-id="ComponentTestId«
Se generó solo en un entorno de prueba, y
select según el atributo de datos. Pero esto no siempre fue suficiente. Por ejemplo, tenemos un componente, pero en el interior todavía hay un
div ,
span ,
icon , icon en la etiqueta i. ¿Qué hacer al respecto?
Para esta cola, también generamos
XPath :
function createXPathFromElement(elm) { var allNodes = document.getElementsByTagName('*'); for (var segs = [ ]; elm && elm.nodeType = 1; elm = elm.parentNode) { if (elm.hasAttribute('class')) { segs.unshift(elm.localName.toLowerCase() + '[a)class = «' + elm.getAttribute('class') + ' »] '); } else { for (i = 1, sib = elm.previousSibling; sib; sib = sib.previousSibling) { if (sib.localName = elm.localName) i++; }; segs.unshift(elm.localName.toLowerCase() + '[' + i + ']'); }; }; return segs.length ? '/' + segs.join('/') : null; };
Como resultado, se forma un selector XPath único, que consiste, en un caso exitoso, en el atributo de datos del selector por el atributo de datos con el nombre del componente:
<b><u>.//*[@data-test-id='ComponentName']</b></u>/ul/li/div/p[2]
Si todavía existía algún tipo de estructura compleja dentro del componente, todo lo demás se destacaba según la estricta XPath, sin identificación. Evitamos id porque trabajamos con ExtJs.
Este XPath podría ser fácilmente probado. Todos grabamos, exportamos de vuelta al documento HTML, volvimos a cargarlo en Selenium IDE y lo ejecutamos.
Creamos la Extensión de Chrome, que simplemente generó el formato de registro Selenium IDE, pero a su manera, no de la manera que lo hace Selenium IDE. Allí agregamos muchas comprobaciones inteligentes para el desplazamiento de la ruleta, la carga exitosa de la aplicación; agregamos matices adicionales que el Selenium IDE no tiene en cuenta. Gracias a esto, tenemos pruebas completamente automatizadas de extremo a extremo.
Lo único que quedó para que los evaluadores hicieran después de eso fue abrir cualquier versión de la aplicación, hacer clic, cargar en Selenium IDE, verificar, guardarla como un código Python, disfrutar del aumento de sueldo y bonificación y decirme "gracias".
Para las pruebas unitarias, no puedo complacer a las personas de las comunidades React y VueJS, ¡lo siento! No conozco herramientas similares para React y VueJS, quizás lo sean. Solo complaceré a aquellos con Angular.
Simontest
Hay un complemento
SimonTest en Visual Studio Code para Angular.
unit- — unit-. :
- - , - . , unit-.
— .
Depuración
80% , 80% .
, ? ?
Chrome DevTools
, - , , , .
Debugger ? - - , . Profiler, , Dumps, runtime, , , .
Tracing
—
: . runtime : , , — promise, setTimeout, setTimeout promise. .
Spy-js vs TraceGL
:
Spy-js TraceGL . , . Debugger : , — ? , , — .
, , — , . , deadlocks — deadlock , .
JS , . . deadlocks .
Spy-js WebStorm, , . spy-js. TraceGL Mozilla. , , Firefox -. TraceGL , , , . TraceGL Chrome , , .
, WebStorm, Spy-js. : Spy-js, , . WebStorm : TypeScript, CoffeeScript, . Spy-js, , , , . .
, , 5 , : , , , . — , , .
?
- .
- , - , , -.
- . .
- — , , ;
- , : .
- , , — , .
- — .
- , ! .
? «, »:
— ! : , 5 ! !— 2018 . Frontend Conf . ++. ? ! Frontend Conf ++ , : , , .
. ..