oc-components-examples

KO | EN

gitlite — search

#react #ai #go #rust #deep-learning #docker #macos #nodejs #windows #cli #kubernetes #vue #awesome-list #pytorch

oc-components-examples

(★ 14)

🏫 OC components examples, covering the most common use cases.

oc-components-examples Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

oc-components-examples
======================

[![Join the chat at https://gitter.im/matteofigus/oc-components-examples](https://badges.gitter.im/matteofigus/oc-components-examples.svg)](https://gitter.im/matteofigus/oc-components-examples?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

This is intended to be a repository with some [OpenComponents](https://github.com/opentable/oc) examples.

## Running locally
```sh
# install oc first (you may want to sudo this)
npm i -g oc

# clone the repo
git clone https://github.com/matteofigus/oc-components-examples.git
cd oc-components-examples

# run the dev watcher
oc dev . 3030

# now open http://localhost:3030 with your browser
```

## The components
Hello world examples using different view engines: [Handlebars](handlebars-hello) and [Jade](jade-hello).

### Static resources
[This example](static-image) shows how to include static resources inside components. When developing locally, the local resources will be used, when the component will be package they will be hosted inside the cdn. When files are `css` or `js` they are automatically minified during the packaging phase.

### Server-side dependencies
[This example](node-dependencies) shows how to use a server-side dependency. Server-side dependencies are declared inside `package.json` as usual for a node module. When developing, the CLI will attempt to resolve it and install it automatically. When publishing, it is important to ensure the registry's maintainer allows that dependency to be used in its own registry. If you own the registry's yourself, [here](https://github.com/opentable/oc/blob/master/docs/advanced-operations.md#nodejs-dependencies-on-the-serverjs) you can find more informations about how to configure external dependencies to be used.

### Client-side javascript dependencies
[This example](moment) shows how to use a client-side library. The oc client will try to resolve the dependency inside the window global scope. In case the dependency will be found, it will be used, if not it will be downloaded from provided url and then the component rendering phase will start. If you want to require local dependencies you obviously can (look at the previous example).

### Styling and client-side css dependencies
If you don't want to do css in-lining, and your component needs some css that is not already on the container, you can require it and you can pause the rendering until the css is loaded and ready. [This example](styled) shows how to require a css file and how to delay the display phase using javascript.

### Nesting components
If you want to nest components, you can. [This example](nested-hello) shows how to render a nested component that is hosted in the same registry (but this is not a mandatory requirement).

### Angular components as OpenComponents
[This example](angular-component) shows how to create an Angular.js component as OpenComponent. In this way, you can design your Angular app as usual, and use OC purely as delivery mechanism.

### React components as OpenComponents
[This example](react) shows how to create a React component as OpenComponent. In this way, you can design your React site as usual, and use OC purely as delivery mechanism.

### Can I do ...? How?
[Let me know](https://github.com/matteofigus/oc-components-examples/issues) if you would like more examples about OpenComponents. I will try to update this list adding more and more examples. If you want to ask any question about OC, [open an issue in the OC main repository](https://github.com/opentable/oc).

## License
MIT

oc-components-examples

oc-components-examples Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

oc-components-examples

oc-components-examples Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README