You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<h1>Building web applications together, faster.</h1>
38
+
</header>
39
+
<p>While microservice architectures allowed teams to scale delivery of independently deployable services, most frontend layers are still run as monolithic applications. Similar to server-side applications, frontend layers often grow into large monoliths that are difficult to maintain and evolve.</p>
40
+
<p>The idea behind <ahref="https://www.thoughtworks.com/radar/techniques/micro-frontends" target="_blank">micro frontends</a> is to enable multiple teams to work seamlessy together by fostering end-to-end ownership of independently developed, tested and deployed features.</p>
41
+
<p>Think about UI as the composition of features which are maintained by independent teams. These teams could be cross-functional allowing them to develop such features end-to-end, from a database to user interface and independently deploy them.</p>
42
+
</article>
43
+
44
+
<divclass="hr">
45
+
<imgsrc="./assets/cube-small.png">
46
+
</div>
47
+
48
+
<article>
49
+
<header>
50
+
<h1>The OpenComponents framework</h1>
51
+
</header>
52
+
<p>OpenComponents is an open-source, "batteries included" micro frontends framework. Born at OpenTable in 2014, it matured over the years into a battle tested solution currently used to deliver micro frontends at scale by fast growing companies around the world.</p>
53
+
<divclass="block">
54
+
<imgsrc="./assets/components.png">
55
+
<div>
56
+
<h2>Components</h2>
57
+
<p>Small, immutable, units of universal code mainly consisting of html, javascript and css. They can optionally contain some logic, allowing a server-side node.js application to compose a model that is used to render the view. After rendering they are pieces of pure html to be injected into any html page. <ahref="https://github.com/opentable/oc/wiki#components-management" target="_blank">Learn more</a></p>
58
+
</div>
59
+
</div>
60
+
<divclass="block img-right">
61
+
<imgsrc="./assets/template-system.png">
62
+
<div>
63
+
<h2>Template system</h2>
64
+
<p>OC is unopinionated about components and their underlying client-side JavaScript stack. The template system allows for support of any client-side technology, hiding away all the configuration complexity while avoiding specific UI framework lock-in. <ahref="https://github.com/opentable/oc/wiki/The-template-system" target="_blank">Learn more</a></p>
65
+
</div>
66
+
</div>
67
+
<divclass="block">
68
+
<imgsrc="./assets/registry.png">
69
+
<div>
70
+
<h2>Registry</h2>
71
+
<p>The registry provides a rest API to consume, retrieve, and publish components to a library. When components depend on static resources (such as images, css files, etc.) these are stored, during packaging and publishing, in a publicly-exposed part of the library that serves as a CDN. <ahref="https://github.com/opentable/oc/wiki/Registry" target="_blank">Learn more</a></p>
72
+
</div>
73
+
</div>
74
+
<divclass="block img-right">
75
+
<imgsrc="./assets/cli.png">
76
+
<div>
77
+
<h2>CLI</h2>
78
+
<p>The CLI tool allows developers to create, develop, and test components locally. It also allows publishing of components to your registry. <ahref="https://github.com/opentable/oc/wiki/Cli" target="_blank">Learn more</a></p>
79
+
</div>
80
+
</div>
81
+
<divclass="block">
82
+
<imgsrc="./assets/clients.png">
83
+
<div>
84
+
<h2>Client libraries</h2>
85
+
<p>Multiple libraries are available, allowing clients to consume components on different environments and platforms. Depending on the library, clients are normally able to consume both unrendered components and rendered components. <ahref="https://github.com/opencomponents/oc-client-node#oc-client" target="_blank">Learn more</a></p>
86
+
</div>
87
+
</div>
88
+
</article>
89
+
90
+
<divclass="hr">
91
+
<imgsrc="./assets/cube-small.png">
92
+
</div>
93
+
94
+
<article>
95
+
<header>
96
+
<h1>Get started with OpenComponents</h1>
97
+
</header>
98
+
<p>Before starting make sure you have:<br>
99
+
</p><ul>
100
+
<li>An account on <ahref="https://signup.heroku.com/" target="_blank">Heroku</a></li>
101
+
<li>An <ahref="https://aws.amazon.com/s3" target="_blank">S3</a> bucket on AWS</li>
102
+
</ul>
103
+
<p></p>
104
+
<h3>#1 - Deploy the registry to Heroku</h3>
105
+
<p>
106
+
<aclass="button secondary" href="https://heroku.com/deploy?template=https://github.com/opencomponents/starter-kit" target="_blank">Click to deploy to Heroku</a> - deploy your OpenComponents registry
107
+
</p>
108
+
<h3>#2 - Build your first component</h3>
109
+
<p>Install the OpenComponents CLI</p>
110
+
<pre>$ npm install -g oc</pre>
111
+
<p>Create your first component</p>
112
+
<pre>$ oc init my-first-component</pre>
113
+
<p>Develop/test locally by starting a local dev registry</p>
<p>Your component is now published: <ahref="http://my-registry.on.herokuapp.com/my-first-component" target="_blank">http://my-registry.on.herokuapp.com/my-first-component</a></p>
127
+
</article>
128
+
129
+
<divclass="hr">
130
+
<imgsrc="./assets/cube-small.png">
131
+
</div>
132
+
133
+
<article>
134
+
<header>
135
+
<h1>Who's using OC?</h1>
136
+
</header>
137
+
<p>OC is used by fast growing companies around the world to serve microfrontends at scale</p>
0 commit comments