Construire et automatiser l’écosystème de son
SaaS grâce à une spécification OpenAPI (Swagger)
François-Guillaume Ribreau
—
François-Guillaume Ribreau
—
Ex-Bringr cofounder & CTO
François-Guillaume Ribreau
—
Ex-Bringr cofounder & CTO
Ex-Architect @iAdvize
François-Guillaume Ribreau
—
Ex-Bringr cofounder & CTO
Ex-Architect @iAdvize
Architect & Head of development @Ouest-France
François-Guillaume Ribreau
—
Ex-Bringr cofounder & CTO
Ex-Architect @iAdvize
Architect & Head of development @Ouest-France
🌟 Founded @imagecharts @Redsmin @mailpopin
François-Guillaume Ribreau
—
Ex-Bringr cofounder & CTO
Ex-Architect @iAdvize
Architect & Head of development @Ouest-France
🌟 Founded @imagecharts @Redsmin @mailpopin
🚀 Trainer @EPSI_Nantes @UnivNantes
François-Guillaume Ribreau
—
Ex-Bringr cofounder & CTO
Ex-Architect @iAdvize
Architect & Head of development @Ouest-France
🌟 Founded @imagecharts @Redsmin @mailpopin
🚀 Trainer @EPSI_Nantes @UnivNantes
📢 Twitter/Github: @FGRibreau
Context
https://chart.googleapis.com/chart?cht=p3&chd=t:
60,40&chs=500x500&chl=Hello|World
https://chart.googleapis.com/chart?cht=p3&chd=t:
60,40&chs=500x500&chl=Hello|World
https://chart.googleapis.com/chart?cht=p3&chd=t:
60,40&chs=500x500&chl=Hello|World
<img src=“https://chart.googleapis.com/chart?…” />
One rule: Automate, automate, automate.
๏API Documentation
๏API GUI client (APIGee like)
๏API Input Validation
•Plugins ecosystem
•Client libraries
Checkpoint
Solution
Single Source of Truth + Input Validation
Documentation with Swagger-UI
Documentation with Swagger-UI
Release pipeline
SCM
Release pipeline
SCM CI CD image-charts.com
enforce code-cov. >98% (nyc)
update deps (updtr) + commit
daily build
✓API Documentation
✓API GUI client (APIGee like)
✓API Input Validation
?Plugins ecosystem
?Client libraries
Checkpoint
CI
npm run --silent download-swagger
// curl -s https://image-charts.com/swagger.json > scripts/swagger.json
CI
npm run --silent download-swagger
// curl -s https://image-charts.com/swagger.json > scripts/swagger.json
&& npm run --silent generate
// node scripts/generateREADME.js > README.md
// && node scripts/generateComponent.js > src/index.js
// && babel src/index.js > lib/index.js
CI
npm run --silent download-swagger
// curl -s https://image-charts.com/swagger.json > scripts/swagger.json
&& npm run --silent generate
// node scripts/generateREADME.js > README.md
// && node scripts/generateComponent.js > src/index.js
// && babel src/index.js > lib/index.js
&& npm run --silent test
CI
npm run --silent download-swagger
// curl -s https://image-charts.com/swagger.json > scripts/swagger.json
&& npm run --silent generate
// node scripts/generateREADME.js > README.md
// && node scripts/generateComponent.js > src/index.js
// && babel src/index.js > lib/index.js
&& npm run --silent test
&& npm run --silent test-coverage
CI
npm run --silent download-swagger
// curl -s https://image-charts.com/swagger.json > scripts/swagger.json
&& npm run --silent generate
// node scripts/generateREADME.js > README.md
// && node scripts/generateComponent.js > src/index.js
// && babel src/index.js > lib/index.js
&& npm run --silent test
&& npm run --silent test-coverage
&& npm run --silent coverage-send
CI
npm run --silent download-swagger
// curl -s https://image-charts.com/swagger.json > scripts/swagger.json
&& npm run --silent generate
// node scripts/generateREADME.js > README.md
// && node scripts/generateComponent.js > src/index.js
// && babel src/index.js > lib/index.js
&& npm run --silent test
&& npm run --silent test-coverage
&& npm run --silent coverage-send
&& npm run --silent updtr
CI
npm run --silent download-swagger
// curl -s https://image-charts.com/swagger.json > scripts/swagger.json
&& npm run --silent generate
// node scripts/generateREADME.js > README.md
// && node scripts/generateComponent.js > src/index.js
// && babel src/index.js > lib/index.js
&& npm run --silent test
&& npm run --silent test-coverage
&& npm run --silent coverage-send
&& npm run --silent updtr
&& npm run --silent changelog
&& npm run --silent release
// […] && npm-release $(jq.node 'get("info.version")' < ./scripts/swagger.json) &&[…]
CI
scripts/model.js
scripts/generateComponent.js
src/index.js
src/index.js
Release pipeline
SCM CI CD image-charts.com
….
Release pipeline
SCM CI CD
CDCI mjml-chart
image-charts.com
Plugins
ecosystem
download swagger
generate lib
update deps
run tests
changelog
release
….
✓API Documentation
✓API GUI client (APIGee like)
✓API Input Validation
✓ Plugins ecosystem
? Client libraries
Checkpoint
docker 🐳
swaggerapi/swagger-generator
:8080
curl localhost:8080/api/gen/clients | jq.node 'join("n")'
docker 🐳
swaggerapi/swagger-generator
:8080
curl localhost:8080/api/gen/clients | jq.node 'join("n")'
Release pipeline
SCM CI CD
CDCI mjml-chart
image-charts.com
Plugins
ecosystem
…
Release pipeline
SCM CI CD
CD
github.com/image-
charts/lib-...CI
CI
CD
mjml-chart
image-charts.com
Client
libraries
Plugins
ecosystem
…
✓API Documentation
✓API GUI client (APIGee like)
✓API Input Validation
✓ Plugins ecosystem
~ Client libraries
Checkpoint
#FAIL
Free plans for Redis
administration & monitoring
at redsmin.com
Questions?
@FGRibreau
No more server-side rendering pain,
1 url = 1 chart
image-charts.com
Free plans for Redis
administration & monitoring
at redsmin.com
We are looking for Front-end Developers
twitter.com/iadvizetech
Questions?
@FGRibreau
No more server-side rendering pain,
1 url = 1 chart
image-charts.com

[BreizhCamp, format 15min] Construire et automatiser l'ecosystème de son SaaS grâce à une spécification OpenAPI