Quiero hacer una reserva de inmediato que este artículo no está destinado a aquellos que tienen el desarrollo frontend de la actividad principal. Esta publicación está destinada a desarrolladores de backend que necesitan con urgencia ajustar la interfaz de usuario web o aquellos que solo están interesados en nuevas áreas, así como a los desarrolladores fullstack.
Entonces, pasemos al problema. Recuerdo
un artículo , y también, en los espacios abiertos de Habr había varios más similares. Todos se presentan como cómicos, pero como dicen "en cada broma hay un grano de verdad", y aquí ni siquiera es un poco ... Pero aquí está la pregunta, ¿qué tan útiles son todos estos marcos, son necesarios?
La pregunta que me gustaría plantear es principalmente sobre el montaje. Es en esta etapa que la comunidad js ofrece una increíble cantidad de herramientas, cuya necesidad no es del todo obvia. Por ejemplo, la comunidad ofrece varias opciones para trabajar con módulos, lo que tenía sentido en ese momento, pero en este momento, la especificación de
importación /
exportación es compatible con todos los navegadores modernos, e incluso no con el navegador de borde. Como mencionamos anteriormente que no tenemos motivos para trabajar con bibliotecas antiguas, analizaremos las especificaciones de importación / exportación. Pero lo que realmente necesitamos es algún tipo de trabajo con dependencias.
Haré una pequeña digresión para explicar la elección de las tecnologías que se utilizarán en el ejemplo de la interfaz. Para no profundizar en la gran variedad de marcos, pasemos de un
estándar maravilloso. Entonces, todo se está volviendo bastante simple, no hay DOM virtual, hay componentes web. Esto podría estar terminado, pero aún así js. Si decidimos deshacernos de js
puro , entonces tendremos que resolver de alguna manera los problemas de infraestructura, deshacernos del código boilerlet, etc. En otras palabras, hacer que su bicicleta sea un poco ... Para no hacer esto, me gustaría llevar algo donde ya se haya hecho todo y sea de una calidad lo suficientemente alta. En consecuencia, mi elección recayó en
Polymer , un marco de trabajo de Google que introdujo los componentes web en el estándar.
De vuelta a la asamblea. Muchos de ustedes (en cualquier caso, desarrolladores de Java) están acostumbrados a una herramienta como maven y gradle, y probablemente lograron descubrir que están haciendo un gran trabajo con la manipulación de recursos (maven es ciertamente un poco peor, pero gradle no tiene ningún problema en absoluto cualquier cosa) La comunidad frontend nos ofrece tomar npm, para lo cual se necesita nodeJs, pero esto no es suficiente, webpack también está en la cima. Y todavía tienen que entender y poner a cada desarrollador. Um ... Me gustaría desinflar el repositorio, hacer que Gradlew construya y comenzar a trabajar, así que detengámonos en el gradle habitual.
Por supuesto, no podemos prescindir de npm en absoluto, al menos necesitamos un repositorio de donde obtener bibliotecas js y npm lo proporciona, pero la utilidad es opcional. Puede encontrar algunas buenas soluciones como
esta , pero siempre descargan nodeJs y ejecutan tareas npm. Una opción, pero me gustaría minimizar la comunicación con npm antes de interactuar con el repositorio y más. Como solución, escriba su propio complemento para gradle. Aunque escribir complementos para gradle es bastante simple, debido a la gran variedad de opciones para especificar versiones para el repositorio npm, la tarea es algo más complicada. Afortunadamente, hay una
documentación clara para esto.
Entonces, escribamos un script gradle para cargar dependencias. Lo utiliza kotlin dsl por la razón de que reescribirlo a groovy dsl es bastante trivial, pero por el contrario, llevaría tiempo si no hubiera experiencia previa.
repositories { mavenLocal() jcenter() } dependencies { classpath("com.github.artfable.gradle:gradle-npm-repository-plugin:0.0.3") } apply(plugin = "artfable.npm") configure<GradleNpmRepositoryExtension> { output = "$projectDir/src/libs/" dependencies = mapOf( Pair("@polymer/polymer", "3.0.5"), Pair("@polymer/app-layout", "3.0.1"), Pair("@polymer/paper-toolbar", "3.0.1"), Pair("@polymer/paper-icon-button", "3.0.1"), Pair("@polymer/iron-icons", "3.0.1"), Pair("@webcomponents/webcomponentsjs", "2.1.3") ) }
Este
complemento nos agregará
npmLoad . Para dejar que el IDE se agrupe bien, defínalo en un grupo
tasks["npmLoad"].group = "frontend"
Genial, puedes intentar escribir código para nuestra interfaz. El servidor Intellij incorporado le informará de forma predeterminada que el
Método no permitido está intentando conectar los scripts a través de la importación. Para evitar esto, marque la casilla de verificación
permitir el uso de solicitudes . (en las últimas versiones funciona sin él).
Intentemos comenzar ahora, y ... Aún así, nada funcionó. Las dependencias dentro de los componentes del polímero se cayeron. El hecho es que muchas bibliotecas js impulsan las importaciones con la expectativa de algún tipo de transpiler como babel. Tal importación se ve así:
import '@polymer/polymer/polymer-legacy.js';
Esta importación de sintaxis no es correcta, ya que para el navegador, la ruta debe comenzar solo con '/', './' o '../'. Además, en esta forma no se puede tomar como relativo o absoluto, ya que aquí el cálculo se realiza para el comienzo del directorio de la biblioteca desde la raíz. Por lo tanto, tales rutas deben corregirse y, para no hacerlo usted mismo, puede tomar un
complemento preparado.
De acuerdo a
classpath("com.github.artfable.gradle:gradle-js-import-fix-plugin:0.0.1")
apply(plugin = "artfable.js.import.fix") configure<GradleJsImportFixExtension> { directory = "$projectDir/src/libs" }
Se
agregará la tarea
jsImportFix , que ordenará todas las importaciones.
Simplemente así, y sin tener que lidiar con una montaña de nuevas herramientas, puede armar un frente. Pero veamos nuevamente el tema de los estilos. Francamente, los componentes web eliminan la repetitiva, y las variables en CSS que ya están en el estándar abren muchas posibilidades, por lo que ya no se necesitan cosas como sass. Pero de repente, por ejemplo, te gustaba mucho el
bootstrap y querías hacer un diseño basado en él.
Encontrar un complemento para construir sobre este tema no es un problema, básicamente, todos toman
libsass como base y hay un contenedor
java -
jsass . El único problema para todos (al menos en el momento en que los consideré) es duplicar archivos dependientes.
Un ejemplo:
Archivo a:
@import “b”; @import “c”;
_B y _c archivos:
@import “d”;
Como resultado, obtenemos en el archivo principal 2 bloques idénticos del archivo _c. Simplemente puede solucionarlo, si agrega el
importador a jsass, la API lo permite. En realidad, por lo tanto, estoy nuevamente con mi decisión
aquí (si no hay tales requisitos, entonces es mejor usar otra solución).
Agregar dependencias npm a la lista
Pair("bootstrap", "4.1.3")
Dependencia del complemento
classpath("com.github.artfable.gradle:gradle-sass-plugin:0.0.1")
apply(plugin = "artfable.sass") configure<GradleLibsassPluginExtension> { group(delegateClosureOf<GradleLibsassPluginGroup> { sourceDir = "src/sass" outputDir = "src/css" } as Closure<Any>) } tasks.create("processResources")
La tarea falsa processResources deberá crearse si el complemento de Java no está conectado (y no lo necesitamos aquí). Esto es, por supuesto, un defecto, entonces definitivamente lo arreglaré.
Tenga en cuenta que el archivo css resultante no debe estar conectado a la
cabeza , ya que dentro del componente no será visible, sino directamente en la plantilla del componente en sí.
El último paso es modificar ligeramente la secuencia de comandos para obtener el directorio de
compilación habitual, con un proyecto listo que se puede implementar para producir.
El código completo se cargó en github (probablemente tendrá que migrar a gitlab más tarde ...).
Espero que la idea básica sea clara, y luego puedes agregar simplemente lo que quieras. Gracias por leer