Skip to content

Instantly share code, notes, and snippets.

@lukaselmer

lukaselmer/slides.md

Last active December 12, 2018 22:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lukaselmer/7f83126098db6584d3518602e42ef24a to your computer and use it in GitHub Desktop.
Save lukaselmer/7f83126098db6584d3518602e42ef24a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
slides.md

https://hackmd.io/ts-swiss https://hackmd.io/p/ts-swiss

title: 'TypeScript Switzerland Winter Meetup' tags: talk

<style> .reveal section img { border-width: 0px; background-color: transparent; } </style>

HackMD-it

enhance GitHub with

open collaborative editor

Yukai Huang

@TypeScript Switzerland

slide: hackmd.io/p/ts-swiss

We have a collaborative session

please prepare laptop or smartphone to join!

Who am I? 👷

  • Yukai Huang
  • Full Stack Developer @HackMD 📚
  • VSCode ❤️
  • I use tabs. 🐱

What's HackMD?

Shamelss plug here 😆

Let's play with it! 🥚

hackmd.io/ts-swiss-demo

70% of our users are developers. Developers ❤️ GitHub.

🎉

{%youtube E8Nj7RwXf0s %}

Usage flow

🍕

Extension architecture 🏠

Background script

  • Run after the extension start
  • Long run action, web request, heavy works, ...
  • Kinda backend

Content script

  • Bind with each page
  • Manipulate DOM
  • Add event listeners
  • Isolated JavaScript environment
    • It doesn't break things

Injected script

  • Injected with content script
  • Accessing global variable
  • Call global function
  • Acts as JavaScript inserted with HTML script tag <script>

3 environments

🏁

cross-environment communication

Case: Sync HackMD with GitHub

  • We can't send message between two injected scripts
  • We need to manage flow by ourself
  • Different set of API
    • content <-> background
    • content <-> injected

🍴

<style> code.blue { color: #337AB7 !important; } code.orange { color: #F7A004 !important; } </style>
  • onMessage('event'): Register event listener
  • sendMessage('event'): Trigger event

Register event listener

Trigger event

What if we want the result back?

😵 😑

It's a pain to bridge events manually

💡

  • Dead simple API
  • Only cares about application logic
import * as Channeru from 'channeru'

// setup channel in different page environment, once
const channel = Channeru.create()
// in background script
const fakeLogin = async () => true

channel.answer('isLogin', async () => {
  return await fakeLogin()
})

// in inject script
const isLogin = await channel.callBackground('isLogin')
console.log(isLogin) //-> true

💯 💪 🎉

Our extension is not open sourced for now 😅

Use crx-bridge as alternative

https://github.com/NeekSandhu/crx-bridge

We ❤️ typescript!

  • Strongly Typed: Manage different protocol with ease
  • IDE Features (I ❤️ VSCode)

One more thing

HackDF

HackDF keeps Documentation Fresh

(recursive acronym)

hackmd.io/hackdf

  • an GitHub App
  • Integrate GitHub With HackMD
  • Remind you when should update documentation
  • Commit and push documentation changes right on HackMD

Wrap up

  • Cross envornment commnication
  • A small library to solve messaging pain
  • TypeScript Rocks 🎉

Wishlist

Thank you! 🐑

You can find me on

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment