¿Cuál es el método más complicado que escribiste en las aplicaciones web?

Escribí un artículo en Medium sobre cómo escribir aplicaciones web que puedan implementar la recarga en caliente usando RequireJS + React / Backbone

Puedes leer sobre eso aquí:

Recarga en caliente en 2015:

• ¿Existe una aplicación web existente que pueda administrar múltiples proyectos de sitios web en un panel?
• Programación: ¿Existe una "reserva de citas como servicio" para los desarrolladores de sitios web?
• ¿Cuál es la diferencia entre la aplicación SBI Anywhere y la aplicación SBI Freedom?
• ¿Cuál es el mejor software de gestión / organización del tiempo?
• ¿Cuál es la mejor herramienta basada en la nube para administrar su conocimiento en cualquier lugar?

Lo esencial es que todas las partes de sus vistas deben volver a cargarse en caliente. Lo que eso significa si cambia una vista secundaria, significa que ha actualizado la vista principal, lo que significa que el enrutador tendrá vistas de carga bajo demanda si es necesario.

Entonces, en el enrutador Backbone podríamos tener:

uploadHistory: function () {
var routerOpts = {};
this.changeView (routerOpts, function (cb) {
require ([‘CSS_BASE / mapping-upload-history / style.css’, ‘REACT_VIEWS_BASE / mapping-file-history / HistoryView’], function (style, HistoryView) {
routerOpts.cssAdds = [estilo];
routerOpts.view = HistoryView;
cb (nulo);
}, función errback (err) {
console.error (err);
cb ();
});
});
},

por lo que la función del enrutador anterior es responsable de finalmente presentar esta vista principal:

/ * Globales Backbone, _, $, React, ReactDOM * /

definir(
[
‘+ appState’,
‘@todos los modelos’,
‘@allCollections’,
‘form2js’,
‘@allFluxActions’,
‘REACT_VIEWS_BASE / mapping-file-history / children / history-row’,
‘exigir’,
‘módulo’
],

función (appState, modelos, colecciones, form2js, allFluxActions, HR, require, module) {

const coll = collections [‘asignación-carga’];
const users = collections [‘usuarios’];

return React.createClass (Object.assign ({

getInitialState: function () {
regreso {
artículos: []
}
},

componentDidMount: function () {
this.runInitialData ();
this.listenTo (coll, ‘agregar eliminar’, this.onLocalModelChange);
},

runInitialData: function () {

datos var = [];

coll.models.forEach (function (model) {

var obj = model.toJSON ();
var user = users.findWhere ({id: obj.uploadedBy});
if (usuario) {
obj.uploadedBy = user.get (‘nombre de usuario’);
}

data.push (obj);
});

this.setState ({
artículos: datos
});

},

componentWillUnmount: function () {
this.stopListening ();
},

onHistoryCollectionAdd: function () {
this.setState (coll.toJSON ());
},

onLocalModelChange: function () {
this.runInitialData ();
},

getItems: function () {

devuelve this.state.items.map (function (item) {

regreso (

});
},

getTableHeader: function () {

regreso (

)
},

render: function () {

HR = require (‘./ children / history-row’);

elementos const = this.getItems ();

regreso (

)

}

}, Backbone.Events));

});

Como puede ver arriba, la vista principal tiene una vista secundaria llamada ‘historial-fila’, puede ver que el historial de la fila se hace referencia en dos lugares, una vez en la matriz requirejs dep y nuevamente en la función de representación. La razón por la que volvemos a hacer referencia a la vista secundaria en la función de representación es para habilitar la recarga en caliente. Sin volver a hacer referencia al archivo, nos quedaremos atrapados con la referencia original para el resto del ciclo de vida de la aplicación.

Aquí está la vista secundaria ‘fila de historial’:

/ * Globales Backbone, _, $, React, ReactDOM * /

definir([

‘+ appState’,
‘@todos los modelos’,
‘@allCollections’,
‘@allFluxActions’,
‘@ReactChildViewProto’
],

función (appState, modelos, colecciones, allFluxActions, ReactChildViewProto) {

var FluxCartActions = allFluxActions [‘FluxCartActions’];

return React.createClass (Object.assign ({

componentDidMount: function () {

},

componentWillUnmount: function () {
this.stopListening ();
},

render: function () {

elemento const = this.props.item;

regreso (

);

}

}, ReactChildViewProto, Backbone.Events));

});

Si tiene interés en aprender más sobre cómo recargar en caliente con RequireJS y React, no dude en enviarme un mensaje o comentario.