• Stars
    star
    139
  • Rank 262,954 (Top 6 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created almost 9 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Service Oriented Front-end

Project status

Sofe is a plugin for [email protected], but the latest version of systemjs is >3. The new versions of systemjs have the equivalent of sofe built into systemjs itself, via import maps. Because of this, we encourage that you use systemjs@>=3 + import maps, instead of using [email protected] + sofe. See this file for an example of what the new alternative looks like. For the equivalent of sofe's local storage overrides, check out import-map-overrides.

sofe

Service Oriented Front-end - Sofe is a SystemJS plugin that resolves a module name to a fully qualified url at runtime.

npm version Build Status Code Coverage

Sofe allows developers to avoid building monolothic front-end web applications and instead build software on top of micro-services. Sofe is a JavaScript library that enables independently deployable JavaScript services to be retrieved at run-time in the browser.

More on the motivation for SOA in the browser

Getting Started

  1. Setup SystemJS and JSPM
  2. Configure SystemJS to use the sofe plugin:
jspm install npm:sofe
  1. Load sofe services:
System.import('sofe-hello-world!sofe')
  .then(hello => hello())
// Sofe is properly setup if the browser alerts a hello world.
// You have successfully loaded the hello-world sofe service.

By default, any npm package with a UMD build can be a sofe service. Simply load the service by the package name:

System.import('backbone!sofe')
  .then(Backbone => new Backbone.View({}));

Create your own service

By default, all npm packages are loaded through npm (unpkg). While this is convenient, it isn't always what you want to do for your own services. You can provide a custom location for where your service distributable is located by adding a sofe property to your package.json:

{
  "name": "my-service",
  "version": "1.0.0",
  "sofe": {
    "url": "https://cdn.some-location.com/my-service-1.0.0.js"
  }
}

Republish a new sofe URL to npm whenever you want to update the location of your service distributable.

Services in production

Create your own private service by telling sofe how to resolve your service name. Add to your systemjs configuration a manifest option to a sofe property or auto-discover services by loading a remote manifest of available services:

System.config({
  sofe: {
    manifest: {
      "someInternalService": "http://somelocation.com/service-1.0.0.js"
    },
    manifestUrl: 'https://somelocation.com/available-services.json'
  }
});

Learn more about production configuration within the API documentation

Examples

Examples are available at sofe.surge.sh or you can run them locally

Tools

  1. sofe-inspector - Developer tool for inspecting and overriding available sofe services
  2. sofe-babel-plugin - A babel plugin for production sofe workflows with webpack
  3. sofe-deplanifester - A manifest deployment service for sofe
  4. sofe-hello-world - A simple sofe-service to say hello

License

Copyright 2016 CanopyTax

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

More Repositories

1

asyncpgsa

A wrapper around asyncpg for use with sqlalchemy
Python
417
star
2

ckube

A cli to simplify working with kubectl for some common workflows
Go
132
star
3

bandicoot

React rich text editor
JavaScript
54
star
4

webpack-system-register

A webpack plugin that wraps your bundle in a System.register
JavaScript
36
star
5

kremling

Embarrassingly simple css for React
JavaScript
36
star
6

rxws

A RESTful Reactive JavaScript Implementation on top of Web Sockets
JavaScript
20
star
7

auto-trace

A library that fixes all your stack trace problems.
JavaScript
14
star
8

s3-file-auth

Require github auth for viewing your s3 files
Python
11
star
9

aiohttp-oauth

Oauth middlewear for your aiohttp app.
Python
11
star
10

cpr-multiselect

Canopy React Multi-select Component
JavaScript
11
star
11

Json-Query-Language

PHP
10
star
12

single-spa-canopy

Some helpers for single-spa child apps at canopy
JavaScript
10
star
13

use-once

A helper for running react effects only once
JavaScript
9
star
14

system-svelte

SystemJS plugin for compiling Svelte components
JavaScript
8
star
15

react-disposable-modal

A reactive API for building modal components in React
JavaScript
7
star
16

canopy-styleguide-old

Canopy Style Guide
JavaScript
7
star
17

frontend-rfc

6
star
18

async-decorator

Async tools for React provided by a decorator
JavaScript
6
star
19

node-jspm-jasmine

Run jasmine tests on a jspm project, without karma or phantomjs
JavaScript
6
star
20

cpr-mask

A react masking input component
JavaScript
6
star
21

pgbadger-rds-cron

A cron for parsing rds logs with pgbadger
Python
6
star
22

cronboss

Simple docker cron container for running commands in other docker container
Python
5
star
23

cpr-select

A consistently styled cross-browser and keyboard friendly select component
JavaScript
5
star
24

cp-dotfiles

Some dotfile setups for people who want a jump start on things like vim and tmux.
Vim Script
5
star
25

react-disposable-decorator

decorator for handling observables
JavaScript
5
star
26

kremling-loader

Build kremling css without ampersands
JavaScript
5
star
27

redux-phunk

A redux middleware to make your actions phunktional.
JavaScript
4
star
28

disposable-component

A simple reactive API for mounting and unmounting components to the DOM
JavaScript
4
star
29

kremling.js.org

The documentation website for kremling
3
star
30

sofe-babel-plugin

synchronous-sofe-loader
JavaScript
3
star
31

cpr-tooltip

a React tooltip for heart-threatening situations
JavaScript
3
star
32

sofe-inspector

A tool for managing sofe services
JavaScript
3
star
33

GradientNavigationBar

GradientNavigationBar is a drop in subclass of UINavigationBar that easily allows you to set the background to be a radial gradient.
Swift
3
star
34

cp-autoscale-input

An angular directive for auto sizing and input based upon the content within it
JavaScript
2
star
35

laramandrill

Laravel Mandrill plugin!
PHP
2
star
36

canopytax.github.io

Canopy Tech Blog
HTML
2
star
37

canopy-react-error-boundary

A higher order component / decorator for creating error boundaries in React code.
JavaScript
2
star
38

canopy-webpack-config

Some defaults for webpack configs at canopy
JavaScript
2
star
39

system-amd-script

SystemJS plugin for script loading sofe services
JavaScript
2
star
40

eslint-config-canopy

A standard eslint config for Canopy frontend developers
JavaScript
2
star
41

sofe-cssmodules

CSS Modules with Sofe
JavaScript
2
star
42

cp-select

A consistently styled cross-browser select component
JavaScript
1
star
43

JQL

Python implementation of JQL, with a spec.
1
star
44

cp-progress-slat

A consistently styled progress slat that confirms to the CanopyTax style guide.
HTML
1
star
45

localproxy

A local reverse proxy (such as nginx) for handling many local docker containers.
1
star
46

bandicoot.js.org

The bandicoot.js.org documentation website
1
star
47

minimal-node

A minimal nodejs container built on alpine linux
1
star
48

shade

A Code coverage tool
1
star
49

quip-service

PHP
1
star
50

sofe-worker

Service Oriented Front-end Implemented in a Service Worker
1
star
51

cp-tooltip

A simple tooltip widget for the canopy style guide
JavaScript
1
star
52

brillo

Simple electron IPC using promises
JavaScript
1
star
53

browserslist-config-canopy

Canopy's browsers list config
JavaScript
1
star
54

jest-string-object-serializer

A jest snapshot serializer for String objects
JavaScript
1
star
55

rxws-recorder

rxws middleware to help read websocket requests and responses.
JavaScript
1
star
56

bandicoot-starter

A starter repo for https://bandicoot.js.org
JavaScript
1
star
57

react-async-decorator

A decorator component for loading asynchronous data
1
star
58

aiohttp-github-auth

Github auth middlewear for your aiohttp app
Python
1
star
59

static-server

Just a repo for a static server docker image
Dockerfile
1
star
60

logspit

A docker container for aggregating logs.
Python
1
star
61

bs-time-pick

A time picker directive
JavaScript
1
star
62

ci-test

a dummy project for testing different ci's
Python
1
star
63

draftJS-renderer

A simple parser for draft.js output.
1
star
64

cpr-autoscale-input

A React component for auto sizing an input based on the content within it
JavaScript
1
star
65

cp-progress-bar

A consistently styled progress bar that confirms to the CanopyTax style guide.
HTML
1
star