micro frontends for rapid saas delivery · micro frontends for rapid saas delivery menelaos...
TRANSCRIPT
Micro Frontends for Rapid SaaS Delivery
Menelaos Kotsollaris @Trulioo
February 13 2019 @DeveloperWeek
❤️
//whoami
• I work for - based in YVR ️
• I lead the development of GlobalGateway EmbedID; a SaaS MicroFrontend 🚀
• I really, really like coding in
• Any application that can be written with JS, will eventually be written in JS
• Active in these communities ~ Let’s connect!
@mkotsollaris
Most Frontend Architectures
Backend Architecture
ref: https://guigu.io/notes/120-designing-uber
Common Pitfalls ⏬ with Monolithic Frontends
• Difficulty in maintaining/upgrading codebase
• Build & Deploy time
• Over time the frontend layer, grows and gets more difficult to maintain
• Onboarding and collaborating on the same-codebase
Micro Frontends ️
DOM API
render: function (createElement) {
return createElement('h1', ’My Vue
Component')
}
<div class="col-12">
<input [(ngModel)]="number1"
type="number" name=""
placeholder="number">
</div>
render() {
return <h1>React component</h1>;
}
app.get('/', function (req, res) {
res.sendfile(__dirname + '/public/index.html');
});
Micro Frontends
🚀 Expose Web Components and stich them up with the DOM API
Frontend SaaS Challanges
Authentication -Username & pw, Token Based (jwt), Api Key, Auth2
-Secure Secret Management through BE SDK provider
Distribution
-npm, jsDelivr CDN (vanilla JS)
The EmbedID Delivery
website
client
backend
<html> <script embedid> <h1>Welcome!<h1> </html>
require(’embedid’) (app);
Developer Portal
CRUD EmbedIDExperiences
EmbedID Backend
microservices
<EmbedID/>
Open Source community
Integration
<!– EmbedID Element -->
<div id="trulioo-embedid”/>
<!– Load Embedid script -->
<script type="text/javascript"
src="https://cdn.jsdelivr.net/trulioo"/>
<!– Execute 🚀 -->
<script>
const publicKey = 'PQoy64YSbLQR25aJ';
const accessTokenURL = `https://example.com`;
new TruliooClient(publicKey, accessTokenURL);
</script>
️ GitHub Actions ️
name: Publish
on:
push:
branches:
- master
jobs:
release:
name: release
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: actions/setup-node@v1
with:
node-version: "12.x"
registry-url: "https://registry.npmjs.org"
GH_TOKEN: ${{ secrets.GH_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
run:
npm config set '//registry.npmjs.org/
:_authToken' "${{ secrets.NPM_TOKEN }}"
- run: npm whoami
- run: npm ci
- run: npm run test -- --coverage
- run: npm run semantic-release
GitHub Actions – Automating API Publishing
GitHub Actions ️
name: Build
on: [push]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [12.x]
steps:
- uses: actions/checkout@v1
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Coveralls Parallel
uses: coverallsapp/github-action@master
with:
github-token: ${{ secrets.github_token }}
parallel: true
path-to-lcov: ./coverage/lcov.info
- name: Coveralls Finished
uses: coverallsapp/github-action@master
with:
github-token: ${{ secrets.github_token }}
parallel-finished: true
env:
CI: true
Things I learned the hard way ️
Bundle size
Webpack
Coverage
️ badges
"scripts": {
"start": "webpack-dev-server --mode development", "test": "jest", "remove-transpiled": "rm -rf ./dist", "prepare": "npm run transpile", "lint": "npm run lint:ts", "lint:css": "stylelint -fix \"./src/**/*.{js,ts,tsx}\"", "lint:ts": "eslint --fix \"./src/**/*.{js,ts,tsx}\"", "doctoc-styling": "doctoc STYLING.md", }
"transpile": "babel src -d ./dist --ignore **/tests/", "preversion": "npm test -- ”src/tests/snapshot src/tests/unit", ”files": [”dist”], "semantic-release": "semantic-release” "commitizen": "^4.0.3",
About GitHub Actions ️
Pros • Github Actions are very handy because they are integrated in our version control out of the box.
• YAML syntax and usage of various actions through GH Marketplace
Cons • Still in BETA, some functionality might be buggy • Limited documentation as things change fast • GH Actions V1 deprecated already ️ • Noticeable downtime • Not free for private organizations
Summary
• Able to deploy our micro-frontend applications utilizing GH actions
• Integrated with multiple third parties ( ) to increase code base quality
• Integrated and GitHub to allow seamless publishing through semantic-release
• Deliver ️ an well maintained product to the client • ️ Encourage other developers to participate into development utilizing the latest ️ technologies
trulioo-embedid-client Trulioo-embedid-node
trulioo-react
️ Come say hi ️ @ Booth #104️
@mkotsollaris