title: Framework Development

During maintaining a number of projects, are your familiar with situations below:

  • Each project contains the same configuration files that need to be copied every time, such as gulpfile.js, webpack.config.js.
  • Each project has similiar dependancies.
  • It’s difficult to synchronize those projects based on the same configurations like those mentioned above once they have changed?

Have your team got:

  • a unified technique selection, such as the choice of databases, templates, frontend frameworks, and middlewares.
  • a unified default configuration to balance the deviation of different situations, which are not supposed to resolve in code level, like the differences between companies and open communities.
  • a unified deployment plan keeping developers concentrate on code without paying attention to deployment details of connecting the framework and platforms.
  • a unified code style to decrease code’s repetition and optimize code’s appearance, which is important for a enterprise level framework.

To satisfy these demands, Egg endows developers with the capacity of customazing a framework. It is just an abstract layer, which is able to construct a higher level framework, supporting inheritance of unlimited times. Futhermore, Egg apply a quantity of coding conventions based on Koa.

Therefore, a uniform spec can be applied on projects in which the differentiation fulfilled in plugins. And the best practice summed from those projects can continuously extracted from these plugins to the framework, which is available to other project by just updating the dependances’ version.

See more details in Progressive Development

Framework And Multiprocess

The framework extension is applied to Multiprocess Model, as we know Multiprocess Model and the diffirences between Agent Worker and App Worker, which have diffirent API and both need to inherit.

They both are inherited from EggCore, and Agent is instantiated during the initiation of Agent Worker, while App is instantiated during the initiation of App Worker.

We could think about EggCore as the advanced version of Koa Application, which integrates built-in features such as LoaderRouter and asynchronous launch.

  1. Koa Application
  2. ^
  3. EggCore
  4. ^
  5. ┌──────┴───────┐
  6. Egg Agent Egg Application
  7. ^ ^
  8. agent worker app worker

How To Customize A Framework

To setup by egg-init with the framework option is a good way, in which generates a scaffold for you.

  1. $ egg-init --type=framework yadan
  2. $ cd yadan
  3. $ npm i
  4. $ npm test

But in order to illustrate details, let’s do it step by step. Here is the sample code.

Framework API

Each of those APIs is required to be implemented almost twice - one for Agent and another for Application.

egg.startCluster

This is the entry function of Egg’s multiprocess launcher, based on egg-cluster, to start Master, but EggCore running in a single process doesn’t invoke this function while Egg does.

  1. const startCluster = require('egg').startCluster;
  2. startCluster({
  3. // directory of code
  4. baseDir: '/path/to/app',
  5. // directory of framework
  6. framework: '/path/to/framework',
  7. }, () => {
  8. console.log('app started');
  9. });

All available options could be found in egg-cluster.

egg.Application And egg.Agent

These are both singletons but still different with each other. To inherit framework, it’s likely to inherited these two classes.

egg.AppWorkerLoader and egg.AgentWorkerLoader

To customize framework, Loader is required and has to be inherited from Egg Loader for the propose of either loading directories or rewriting functions.

Framework Extension

If we consider a framework as a class, then Egg framework is the base class,and implementing a framework demands to implement entire APIs of Egg.

  1. // package.json
  2. {
  3. "name": "yadan",
  4. "dependencies": {
  5. "egg": "^2.0.0"
  6. }
  7. }
  8. // index.js
  9. module.exports = require('./lib/framework.js');
  10. // lib/framework.js
  11. const path = require('path');
  12. const egg = require('egg');
  13. const EGG_PATH = Symbol.for('egg#eggPath');
  14. class Application extends egg.Application {
  15. get [EGG_PATH]() {
  16. // return the path of framework
  17. return path.dirname(__dirname);
  18. }
  19. }
  20. // rewrite Egg's Application
  21. module.exports = Object.assign(egg, {
  22. Application,
  23. });

The name of framework, default as egg, is a indispensable option to launch an application, set by egg.framwork of package.json, then Loader loads the exported app of a module named it.

  1. {
  2. "scripts": {
  3. "dev": "egg-bin dev"
  4. },
  5. "egg": {
  6. "framework": "yadan"
  7. }
  8. }

As a loadUnit of framework, yadan is going to load specific directories and files, such as app and config. Find more files loaded at Loader.

Princeple of Framework Extension

The path of framework is set as a varible named as `Symbol.for(‘egg#eggPath’) to expose itself to Loader. Why? It seems that the simplest way is to pass a param to the constructor. The reason is to expose those paths of each level of inherited frameworks and reserve their sequences. Since Egg is a framework capable of unlimited inheritance, each layer has to designate their own eggPath so that all the eggPaths are accessiable through the prototype chain.

Given a triple-layer framework: department level > enterprise level > Egg

  1. // enterprise
  2. const Application = require('egg').Application;
  3. class Enterprise extends Application {
  4. get [EGG_PATH]() {
  5. return '/path/to/enterprise';
  6. }
  7. }
  8. // Customize Application
  9. exports.Application = Enterprise;
  10. // department
  11. const Application = require('enterprise').Application;
  12. // extend enterprise's Application
  13. class department extends Application {
  14. get [EGG_PATH]() {
  15. return '/path/to/department';
  16. }
  17. }
  18. // the path of `department` have to be designated as described above
  19. const Application = require('department').Application;
  20. const app = new Application();
  21. app.ready();

These code are pseudocode to elaborate the framework’s loading process, and we have provided scaffolds to developmentdeployment.

Custom Agent

Egg’s mutilprocess model is composed of Application and Agent. Therefore Agent, another fundamental class similiar to Application, is also required to be implemented.

  1. // lib/framework.js
  2. const path = require('path');
  3. const egg = require('egg');
  4. const EGG_PATH = Symbol.for('egg#eggPath');
  5. class Application extends egg.Application {
  6. get [EGG_PATH]() {
  7. // return the path of framework
  8. return path.dirname(__dirname);
  9. }
  10. }
  11. class Agent extends egg.Agent {
  12. get [EGG_PATH]() {
  13. return path.dirname(__dirname);
  14. }
  15. }
  16. // rewrite Egg's Application
  17. module.exports = Object.assign(egg, {
  18. Application,
  19. Agent,
  20. });

To be careful about that Agent and Application based on the same Class possess different APIs.

Custom Loader

Loader, the core of the launch process, is capable of loading data code, adjusting loading orders or even strengthen regulation of code.

As the same as Egg-Path, Loader exposes itself at Symbol.for('egg#loader') to ensuer it’s accessibility on prototype chain.

  1. // lib/framework.js
  2. const path = require('path');
  3. const egg = require('egg');
  4. const EGG_PATH = Symbol.for('egg#eggPath');
  5. class YadanAppWorkerLoader extends egg.AppWorkerLoader {
  6. load() {
  7. super.load();
  8. // do something
  9. }
  10. }
  11. class Application extends egg.Application {
  12. get [EGG_PATH]() {
  13. // return the path of framework
  14. return path.dirname(__dirname);
  15. }
  16. // supplant default Loader
  17. get [EGG_LOADER]() {
  18. return YadanAppWorkerLoader;
  19. }
  20. }
  21. // rewrite Egg's Application
  22. module.exports = Object.assign(egg, {
  23. Application,
  24. // custom Loader, a dependence of the high level frameword, needs to be exported.
  25. AppWorkerLoader: YadanAppWorkerLoader,
  26. });

AgentworkerLoader is not going to be described because of it’s similarity of AppWorkerLoader, but be aware of it’s located at agent.js instand of app.js.

The principle of Launch

Many descriptions of launch process are scattered at Mutilprocess Model, Loader and Plugin, and here is a summarization.

  • startCluster is invoked with baseDir and framework, then Master process is launched.
  • Master forks a new process as Agent Worker
    • instantiate Agent Class of the framework loaded from path passed by the framework param.
    • Agent finds out the AgentWorkerLoader and then starts to load
    • use AgentWorkerLoader to load Worker synchronously in the sequence of Plugin Config, Extend, agent.js and other files.
    • The initiation of agent.js is able to be customized, and it supports asynchronous launch after which it notifies Master and invoke the function passed to beforeStart.
  • After recieving the message that Agent Worker is launched,Master forks App Workers by cluster.
    • App Workers are mutilple identical processes launched simultaneously
    • App Worker is instantiated, which is similiar to Agent inherited Application class of framework loaded from framework path.
    • The same as Agent, Loading process of Application starts with AppWorkerLoader which loads files in the same order and finally informed Master.
  • After informed of luanching successfully of each App Worker, Master is finally functioning.

Framework Testing

You’d better read unittest first, which is similiar to framework testing in a quantity of situations.

Initiation

Here are some differences between initiation of frameworks.

  1. const mock = require('egg-mock');
  2. describe('test/index.test.js', () => {
  3. let app;
  4. before(() => {
  5. app = mock.app({
  6. // test/fixtures/apps/example
  7. baseDir: 'apps/example',
  8. // importent !! Do not miss
  9. framework: true,
  10. });
  11. return app.ready();
  12. });
  13. after(() => app.close());
  14. afterEach(mock.restore);
  15. it('should success', () => {
  16. return app.httpRequest()
  17. .get('/')
  18. .expect(200);
  19. });
  20. });
  • Different from application testing, framework testing tests framework code instead of application code, so that baseDir varies for the propose of testing kinds of applications.
  • BaseDir is potentially considered to be under the path of test/fixtures, otherwise it should be absolute paths.
  • The framework option is indispensable, which could be a absolute path or true meaning the path of the framework to be current directory.
  • The use of the app should wait for the ready event in before hook, or some of the APIs is not avaiable.
  • Do not forget to invoke app.close() after testing, which could arouse the exhausting of fds, caused by unclosed log files.

Cache

mm.app enables cache as default, which means new envoriment setting would not work once loaded.

  1. const mock = require('egg-mock');
  2. describe('/test/index.test.js', () => {
  3. let app;
  4. afterEach(() => app.close());
  5. it('should test on local', () => {
  6. mock.env('local');
  7. app = mock.app({
  8. baseDir: 'apps/example',
  9. framework: true,
  10. cache: false,
  11. });
  12. return app.ready();
  13. });
  14. it('should test on prod', () => {
  15. mock.env('prod');
  16. app = mock.app({
  17. baseDir: 'apps/example',
  18. framework: true,
  19. cache: false,
  20. });
  21. return app.ready();
  22. });
  23. });

Multipleprocess Testing

Mutilprocess is rarely tested because of the high cost and the unavailability of API level’s mock, meanwhile, processes have a slow start or even timeout, but it still remains the most effective way of testing multiprocess model.

The option of mock.cluster have no difference with mm.app while their APIs are totally distinct, however, SuperTest still works.

  1. const mock = require('egg-mock');
  2. describe('/test/index.test.js', () => {
  3. let app;
  4. before(() => {
  5. app = mock.cluster({
  6. baseDir: 'apps/example',
  7. framework: true,
  8. });
  9. return app.ready();
  10. });
  11. after(() => app.close());
  12. afterEach(mock.restore);
  13. it('should success', () => {
  14. return app.httpRequest()
  15. .get('/')
  16. .expect(200);
  17. });
  18. });

Tests of stdout/stderr are also avaiable, since mm.cluster is based on coffee in which multiprocess testing is supported.

  1. const mock = require('egg-mock');
  2. describe('/test/index.test.js', () => {
  3. let app;
  4. before(() => {
  5. app = mock.cluster({
  6. baseDir: 'apps/example',
  7. framework: true,
  8. });
  9. return app.ready();
  10. });
  11. after(() => app.close());
  12. it('should get `started`', () => {
  13. // set the expectation of console
  14. app.expect('stdout', /started/);
  15. });
  16. });