Microservices dans le frontend

Bonjour, Habr!

, , . . . , . — BSL gyk007.

— , .

,

web . html, css , jquery. - , , , -. , , HighLoad ( ), , , , .

, , . : - React, - Vue .

- , UI- . , , , — .

, : , 6 , , - .

, . , , , , . , .

— , . .

, , , ( , , (, , ). , .

, , , (React, Vue, Angular, Webix …. )

()

- (, , , ...

:

• Root- — , . .
• Page- — , -.
• Layout- — , - .
• Global- — ( , ).
• Embed- — Page- Global-.
  
  . DOM . Page- Layout-, Layout- id (<div id='content'></div>), Page- . .
  
  , , .

:

|--project_name_dir
|--src
  |--modules
      |--Root
          |--root.js
          ...
      |--Module1
          |--module.js
          ...
      |--Module2
          |--module.js
          ...
      ...

, config .

import Root from 'Root/module';
export default {
//    history Api  hash.
historyApi: false,
//     ('/example/path/').
rootPath: '/',
//  Root-.
rootModule: Root,
//    .
mainModule: 'main',
//    404
module404: 'notfound',
//     .
// module -      .
import: async (module) => await import(./modules/${module}/module),
modules: {
auth: {
//   -  ,      .
module: 'ExampleAuth',
},
//  Page-       .
main: {
layout: 'ExampleLayoutWebix',
module: 'ExampleWebix',
embed: {
  //      ExampleEmbed-.
  example: {
    module: 'ExampleEmbed',
  },
},
},
notfound: {
layout: 'ExampleLayoutWebix',
module: 'ExampleError404',
},
//    global: true,
globalwnd: {
global: true,
module: 'ExampleGlobalWnd',
embed: {
  example: {
    module: 'ExampleEmbedGlobal',
  },
},
},
globalnotification: {
global: true,
module: 'ExampleNotification',
},
},
};

, :

main: {
 module: 'PageMain',
 layout: 'Layout',
 icon: icon,
 title: ' ',
 inMenu: true,
}

:

main: {
layout: window.innerWidth < 1000 ? 'Layout_1' : 'Layout_2' ,
module: window.innerWidth < 1000 ? 'Module_1' : 'Module_2 ,
embed: {
example: {
  module: window.innerWidth < 1000 ? 'Embed_1' : 'Embed_2' ,
},
},
},

, Root-, Onedeck.Module.

(Singleton) (Observer).

1 .

:

import Onedeck from 'onedeck';
import App from 'ExampleModule/App.vue';
import Vue from 'vue';
/**
* Class ExampleModule
* module use Vue
*/
export default class ExampleModule extends Onedeck.Module {
//    init.
//     
init (path, state, queryParam) {
console.log('init', this.constructor.name, path, state, queryParam);
this.VueApp = new Vue(App);
this.eventHandler();
}
//     .
eventHandler () {
this.$$on('onAuth', () => this.$$rout({
  path: '/main/',
  state: null,
}));
}
//    dispatcher.
//     url,      .
dispatcher (path, state, queryParam) {
console.log('dispatcher', this.constructor.name, path, state, queryParam);
}
//    mounted.
//      DOM .
mounted (module, layout) {
console.log('mounted', this.constructor.name, module, layout);
}
//    destroy.
//      DOM    
destroy () {
this.$$offAll()
this.VueApp.$destroy();
document.getElementById('root').innerHTML = '';
}
}

. Root-. .

, :

//    history Api  hash
historyApi: false,

$$rout:

import Module from 'Example/module';
//        (Singleton),     .
const module = new Module()

module.$$rout({
//  ,    -  
path: '/module_name/item/1',
// ,       :
state: {id: 1, name: 'example'},
})

path state init dispatcher.

. :

• $$emit;
• $$gemit;

$$on $$onOnce. Root- $$on $$onOnce.

. github .

, . -, .

, .

.

, .

.

, .

, .