-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
162 lines (158 loc) · 9.13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!doctype html>
<html>
<head>
<title>Duo</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="build/index.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,300italic" >
</head>
<body>
<header class="Header">
<form class="Header-search">
<input class="Header-search-input"
type="text"
placeholder="Search packages...">
</form>
<h1 class="Header-title logo"
data-logo="Duo"
data-color="white"><a href="/">Duo</a></h1>
<p class="Header-tagline">A next-generation package manager for the front-end.</p>
<a class="Header-github" href="https://github.com/duojs/duo">View on GitHub</a>
</header>
<main>
<article><p>Duo is a next-generation package manager that blends the best ideas from <a href="https://github.com/component/component">Component</a>, <a href="https://github.com/substack/node-browserify">Browserify</a> and <a href="http://golang.org/">Go</a> to make organizing and writing front-end code quick and painless.</p>
<h2 id="install-it">Install It</h2>
<p>Install Duo straight from <code>npm</code> with:</p>
<pre><code>$ npm install -g duo
</code></pre><h2 id="getting-started">Getting Started</h2>
<p>To get started just write normal Javascript, requiring from GitHub as you need them:</p>
<pre><code class="lang-js">var uid = require('matthewmueller/uid');
var fmt = require('yields/fmt');
var msg = fmt('Your unique ID is %s!', uid());
window.alert(msg);
</code></pre>
<p>That <code>matthewmueller/uid</code> will pull the dependency <a href="https://github.com/matthewmueller/uid">straight from GitHub</a>, without you needing to edit any package manifest file!</p>
<p>You can also require modules straight from your file system:</p>
<pre><code class="lang-js">var modal = require('./modal/index.js');
</code></pre>
<p>Then use <code>duo</code> to install your dependencies and build your file:</p>
<pre><code>$ duo index.js
</code></pre><p>Finally, drop a single <code><script></code> onto your page and you’re done!</p>
<pre><code class="lang-html"><script src="build/index.js"></script>
</code></pre>
<p>Same goes for CSS! You can require dependencies and assets straight from GitHub or from the file system:</p>
<pre><code class="lang-css">@import 'necolas/normalize.css';
@import './layout/layout.css';
body {
color: teal;
background: url('./background-image.jpg');
}
</code></pre>
<p>Then bundle up your CSS with <code>duo</code>:</p>
<pre><code>$ duo index.css
</code></pre><p>And add your bundled-up stylesheet to your page!</p>
<pre><code class="lang-html"><link rel="stylesheet" href="build/index.css">
</code></pre>
<h2 id="features">Features</h2>
<ol>
<li>has first-class support for Javascript, HTML and CSS</li>
<li>exposes a unix-y command line interface</li>
<li>pulls source directly from GitHub with semantic versioning</li>
<li>supports source transforms, like Coffeescript or Sass</li>
<li>does not require a manifest</li>
</ol>
<h2 id="philosophy">Philosophy</h2>
<p>Duo was designed from the ground up to grow alongside your application, making your three main workflows incredibly simple:</p>
<ol>
<li>creating quick proofs of concept</li>
<li>writing modular components</li>
<li>building large web applications</li>
</ol>
<h2 id="i-proofs-of-concept">I. Proofs of Concept</h2>
<p>As developers, we often need to test out an idea or isolate a bug. One of the big issues with existing package managers is that you cannot use your package manager without a lot of boilerplate files like <code>package.json</code> or <code>component.json</code>.</p>
<p>Duo removes this boilerplate, letting you <code>require</code> packages straight from your source code:</p>
<pre><code class="lang-js">var events = require('component/events');
var uid = require('matthewmueller/uid');
</code></pre>
<p>You can also include versions, branches or paths:</p>
<pre><code class="lang-js">var reactive = require('component/[email protected]');
var tip = require('component/tip@master');
var shortcuts = require('yields/[email protected]:/index.js');
</code></pre>
<p>And the same goes for CSS with <code>import</code>:</p>
<pre><code class="lang-css">@import 'necolas/normalize.css';
@import 'twbs/[email protected]:dist/css/bootstrap.css';
</code></pre>
<p>You can even directly require <code>.html</code> or <code>.json</code> files:</p>
<pre><code class="lang-js">var template = require('./menu.html');
var schema = require('./schema.json');
</code></pre>
<p>Duo will take care of the rest, transforming the <code>.html</code> into a Javascript string, and <code>.json</code> into a Javascript object.</p>
<p>When you’re ready to build your files, just run:</p>
<pre><code>$ duo index.js index.css
</code></pre><p>The new files will be located in the newly created <code>build/</code> directory, using the same structure as your project.</p>
<h2 id="ii-components">II. Components</h2>
<p>A successful package manager needs to have a strong component ecosystem. Duo supports all of the existing <a href="https://github.com/component/component/wiki/Components">Component packages</a> out of the box. And, since Duo can load from paths, it supports many <a href="http://bower.io/search/">Bower packages</a> too. <em>There are even plans to support <a href="https://www.npmjs.org/browse/keyword/browser">Browserify packages</a> as well.</em></p>
<p>We’re hoping to bridge the gap between all the different package managers and come up with a solution that works for everyone.</p>
<p>To create your own public component, just add a <code>component.json</code> to your repository:</p>
<pre><code class="lang-json">{
"name": "duo-component",
"version": "0.0.1",
"main": "index.js",
"dependencies": {
"component/tip": "1.x",
"jkroso/computed-style": "0.1.0"
}
}
</code></pre>
<p>And then publish your component on GitHub, so that others can install it by simply requiring it into their application:</p>
<pre><code class="lang-js">var thing = require('your/duo-component');
</code></pre>
<p>If you’re coming from the Component community, you’ll notice that we no longer need to add <code>scripts</code>, <code>styles</code> or <code>templates</code>. Duo handles all of this for you, walking the dependency tree like Browserify and including everything you need automatically, for both Javascript and CSS!</p>
<h2 id="iii-web-applications">III. Web Applications</h2>
<p>In order for a package manager to be truly useful, it needs to scale to accommodate building entire web applications. Once again, Duo makes this process seamless.</p>
<p>Duo allows for building multiple pages at once, so that you can split up your application into different bundles and keep your page assets slim. To build from multiple entry files, just pass more than one entry into <code>duo</code>:</p>
<pre><code>$ duo app/home.js app/about.js app/admin.js
</code></pre><p>You can even use brace expansion:</p>
<pre><code>$ duo app/{home,about,admin}/index.{js,css}
</code></pre><p>If Duo discovers an asset like an image or font along the way, it will automatically include it in your <code>build/</code> directory. Say we have the following image in our CSS file:</p>
<pre><code class="lang-css">@import 'necolas/normalize.css';
body {
background: url('./images/duo.png');
}
</code></pre>
<p>Duo will symlink <code>duo.png</code> to <code>build/images/duo.png</code>, so that you can serve the entire <code>build/</code> directory from your web server.</p>
<h2 id="examples">Examples</h2>
<p>To see some more complex examples of Duo in the wild, check out any of these repositories on GitHub:</p>
<ul>
<li><a href="https://github.com/duojs/duojs.org">duojs/duojs.org</a></li>
<li><a href="https://github.com/duojs/logo">duojs/logo</a></li>
<li><a href="https://github.com/segmentio/analytics.js">segmentio/analytics.js</a></li>
</ul>
<h2 id="community">Community</h2>
<p>For more information, read through some of the resources put together by the folks in the Duo community:</p>
<ul>
<li><a href="https://github.com/duojs/duo">GitHub Repository</a></li>
<li><a href="https://github.com/duojs/duo/blob/master/docs/cli.md">Command Line Usage</a></li>
<li><a href="https://github.com/duojs/duo/blob/master/docs/api.md">Javascript API</a></li>
<li><a href="https://github.com/duojs/duo/blob/master/docs/faq.md">FAQ</a></li>
<li><a href="https://groups.google.com/forum/#!forum/duojs">Mailing List</a></li>
<li><code>#duojs</code> on freenode</li>
</ul>
</article>
</main>
<footer class="Footer">
<p>Brought to you by</p>
<a class="logo"
data-logo="Lapwing Labs"
data-color="white"
href="http://lapwinglabs.com"><span>Lapwing Labs</span></a>
<p>and</p>
<a class="logo"
data-logo="Segment.io"
data-color="white"
href="https://segment.io"><span>Segment.io</span></a>
</footer>
<script src="build/index.js"></script>
</body>
</html>