evan.network

the trust infrastructure for cooperative ecosystems

What we do

Buzzword Bingo

Why Micro Frontends?

Small review of the history of software developer teams

source: https://www.youtube.com/watch?v=ZkHp_qbaCok

Conways Law

organizations which design systems ... are constrained to produce designs which are copies of the communication structures of these organizations.
Melvin Conway
here

classic architecture

microservices

  • same code base for all frontend teams
  • communication overhead for managing different part of the UI
  • microservices are already autonomous

Vertical approach

source: https://www.youtube.com/watch?v=ZkHp_qbaCok

microfrontends

  • independent scaling
  • freedom and responsibility
  • end to end autonomy
  • innovation without carrying about the entire application

How to implement microfrontends?

Different approaches

Single SPA

Demo

evan.network

and microfrontends

Background

DBCP Schema ```json { "public": { "name": "Cool Task with Abis", "author": "Some Company", "description": "Create todos and manage updates.", "dbcpVersion": 1, "dataSchema": { "entry1": { "$id": "list_settable_by_member_schema", "type": "object", "additionalProperties": false, "properties": { "foo": { "type": "string" }, "bar": { "type": "integer" } } }, }, "abis": { "own": [ "contract abi..." ] }, "source": "Qm...", "version": "1.0.0", "versions": { "0.7.0": "Qmf...", "0.8.0": "Qmu...", "0.9.0": "Qmx...", }, } } ```

DApp - Decentralized Application

webpack + SystemJS

DBCP Extension ```json ... "dependencies": { "axios.vue.libs": "^0.18.0", "bcc": "^2.15.0", "router.vue.libs": "^2.5.0", "ui.libs": "^1.8.0", "vue.libs": "^2.5.0", "vuex.libs": "3.1.0" }, "entrypoint": "evancore.vue.libs.js", "files": [ "evancore.vue.libs.js", "evancore.vue.libs.css" ], "origin": "QmWb1hXfCa9tgu5UAuJGifgtDdjBcMi3JkNW4dqaab7GVW", ... ```

Pitfalls

hard beginning

module naming and dbcp naming

  • npm: @evan.network/ui-vue-core
  • dbcp: evancore.vue.libs.evan

releases and tags

Demo + Project Structure