🚀 Plugin DevX

The Problem(s)

  • A simple hello world is complex and takes a lot of steps due to integration problems
  • Developers need to manage multiple build related files which are not part of their business logic
  • developers need to know/learn the platform API and contracts before they start
  • There is a long feedback loop in development time
  • A lot of bugs are discovered only in production

Guidelines

  • Checking against production should be easy (one click/command) against all environments (mobile/firefox etc ...)
  • Feedback loop in development time should be blazing fast
  • Writing tests should be fast and reliable
  • The build tool should know about platform contracts and enforce them
  • Creating a new plugin should be done easily with the minimal amount of things a developer needs to learn

The tools

🔧

Toolkit

🔗

Extension

🌐

 Platform

🔧 Toolkit

  • Platform-specific static analysis
  • Platform-specific build steps
  • Enable running multiple platforms plugin using the same command
  • Extendable
  • Zero configuration

🌐 Platform

  • Typings
  • Documentation
    (api ref, high level architecture, user guide)​​​
  • Good error messages
  • Debuggability
  • Testkit

🔗 Extension

  • Adds the plugin from localhost to the production environment
  • Enable HMR like features for fast feedback loop
  • "Do you want to connect with local development? 📎" To auto connect (auto static override)

A new developer story

Meet Devon 👨‍💻

A new developer at the reviews company @ wix.com

He's done with zero to production and ready to develop his first feature

He got product requirements and now he needs to understand what to do next 

So he goes to the FED handbook and read about the types of platforms at Wix. He decides to start with an editor app 

He runs the following command

 npm init wkit

And gets the following file structure

.
├── editor-app
│   ├── src
│   │   └── index.ts
│   └── test
│       └── index.spec.ts
└── package.json

Start your app for development

npm start

 📑 The Docs

User guide

  • How to create a widget for the editor
  • Adding a router
  • Writing e2e tests

Create a viewer plugin

wkit create viewer-app

Test against production

npm run start:production

The extension automagically detects your locally served app when you open wix.com and suggests to connect between them

The extension exposes runtime helpers that enables fast reloading or reprovisioning

plugin-devx

By Ran Yitzhaki

Made with Slides.com

plugin-devx

  • 247

More from Ran Yitzhaki