javascript - programacion - Combinando reaccionar y jade.
pug preprocesador html (2)
Aunque esto puede ser un poco fuera de tema: nos quedamos con las plantillas de jade.
Básicamente, queríamos la flexibilidad de usar una arquitectura de flujo + no reactivo para áreas del sitio cuando fuera necesario. Nuestro sitio está compuesto básicamente por una serie de aplicaciones SP más pequeñas: Site, UserAccount, Team y Admin.
¿Por qué hicimos esto?
Menor tamaño de archivo y sobrecarga para los usuarios que no acceden a todas las secciones del sitio.
Opción de "optar por salir" de React y flujo si y cuando surja la necesidad.
Más simple, la autenticación del lado del servidor.
Estoy trabajando en una aplicación javascript isomorfa con Express + react. Comenzamos usando jade para las plantillas del lado del servidor para el contenido estático, pero la combinación de las dos se está volviendo difícil de manejar. Hemos terminado con algo como esto:
En las rutas expresas:
router.get("/", function(req, res) {
var webpackStats = require(''../../config/webpack-stats.json'');
var reactHtml = React.renderToString(HiwApp({}));
var slideshowHtml = React.renderToString(slideshowApp({}));
var config = {
webpackStats: webpackStats,
reactOutput: reactHtml,
slideshowHtml: slideshowHtml
};
res.render("how_it_works/howitworks", config);
});
En Jade:
body
.company-logo.center
#react-main-mount
!= reactOutput
include ./content_block_1.jade
include ./content_block_2.jade
#slideshow-main-mount
!= slideshowHtml
Esto es muy frágil. Si queremos jsx, luego una plantilla de jade, más jsx, tenemos que asegurarnos de que recibimos el pedido correctamente.
Mi idea es hacerlo todo con jsx. Sé que hay React.renderToStaticMarkup para este tipo de cosas, pero eso no resuelve el problema de mezclar dinámica con páginas estáticas.
Las grandes preguntas: si decidimos hacer todo esto con jsx (digamos layout.jsx que contiene todos los componentes), entonces llame a React.renderToString(App({}); será este un gran éxito de rendimiento? Si es así, es ¿Hay una mejor manera de hacerlo para combinar fácilmente bloques estáticos y dinámicos?
La forma en que lo hicimos con éxito fue representar una plantilla de shell JSX ( Html.jsx ) en el servidor utilizando React.renderToStaticMarkup() y luego enviarla como respuesta a cada solicitud de ruta expresa del lado del servidor que está destinada a entregar algo de HTML al navegador. Html.jsx es solo un shell que contiene información de cabecera html y scripts GA, etc. No debe contener ningún diseño.
// Html.jsx
render(){
return (
<html>
<head>
// etc.
</head>
<body>
<div
id="app"
dangerouslySetInnerHTML={{__html: this.props.markup}}>
</div>
</body>
<script dangerouslySetInnerHTML={{__html: this.props.state}</script>
<script>
// GA Scripts etc.
</script>
</html>
)
}
Recuerde que está totalmente bien, e incluso se recomienda utilizar el dangerouslySetInnerHTML en el servidor al hidratar su aplicación.
El diseño dinámico debe realizarse con sus componentes isomorfos a través de una jerarquía de componentes en función de su configuración de estado / propiedades. Si está utilizando React Router, entonces su enrutador renderizará los manejadores de vista según las rutas que proporcione, por lo que eso significa que no necesita administrarlo usted mismo.
La razón por la que usamos esta técnica es para separar arquitectónicamente nuestra "Aplicación" que es isomorfa y responde al estado de nuestra plantilla del lado del servidor que es solo un mecanismo de entrega y es efectivamente una placa de calderas. Incluso mantenemos la plantilla Html.jsx entre todos los componentes de Express dentro de nuestra aplicación y no Html.jsx que se mezcle con los otros componentes de React isomorfos.
Uno de los recursos más útiles que encontré para trabajar con React / isomorphic architecture fue https://github.com/yahoo/flux-examples/tree/master/react-router que es de donde robamos esta técnica.
Exploramos la idea de integrar los manillares como un motor de creación de plantillas para los desarrolladores del cliente que utilizan nuestros productos en el futuro, pero decidimos que era menos complejo escribir nuestro propio DSL en JSX y usar algunas rutinas de análisis simples para analizar nuestro DSL similar a HTML a JSX. agregar elementos como la export default (sintaxis del módulo ES6) al inicio de la plantilla y luego importar la plantilla a un componente de representación.
Por supuesto, podría seguir esa línea de pensamiento y usar un compilador de jade para escupir la plantilla y luego agregar la sintaxis del módulo si cree que los archivos de jade separados son esenciales. También noté este proyecto, aunque no lo he explorado con ira: https://github.com/jadejs/react-jade .