-
Notifications
You must be signed in to change notification settings - Fork 40
/
index.html
115 lines (114 loc) · 11.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Ampersand.js, Javascript, ampersand, Node.js, Apps, HTML5">
<title>Ampersand.js - Home</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand:500,700&display=swap">
<link rel="stylesheet" href="/public/css/normalize.min.css">
<link rel="stylesheet" href="/public/css/main.css">
</head>
<body>
<nav class="nav-main cf"><a class="logo logo-ampersand" href="/">Ampersand.js</a><a class="nav-item" href="/learn">Learn</a><a class="nav-item" href="/docs">Docs</a><a class="nav-item external" href="http://tools.ampersandjs.com">Find Modules</a><a class="nav-item external" href="http://amp.ampersandjs.com/">Amp</a><a class="nav-item external" href="https://gitter.im/AmpersandJS/AmpersandJS">Chatroom</a><a class="nav-item" href="/contribute">Contribute</a><a class="button button-primary" href="/learn/quick-start-guide/">Get Started</a></nav>
<header class="hero">
<div class="illustration beach"><img src="/public/images/ampersand-at-the-beach.svg"></div>
<h1>A highly modular, loosely coupled, non-frameworky framework for building advanced JavaScript apps.</h1>
</header>
<hr>
<section class="splash">
<div class="intro container cf">
<h2>What is Ampersand.js?</h2>
<p>Imagine a version of <a href="http://backbonejs.org/">Backbone.js</a> where each piece (model, view, collection, etc) is its own <a href="http://github.com/ampersandjs">GitHub repository</a> and <a href="https://www.npmjs.com/search?q=ampersand">npm module</a> with good, unified <a href="/docs">documentation</a> (and yes, npm is <em>wonderful</em> for frontend code).</p>
<p><em>But</em>, it’s not just that. We added features to some of those pieces and <a href="http://ampersandjs.com/docs#ampersand-state">replaced others entirely</a> but if you know Backbone.js you’ll feel at home.</p>
<p>Companies like <a href="https://www.whatsapp.com/">WhatsApp</a>, <a href="http://www.flipkart.com/">FlipKart</a>, and <a href="#who">others</a> have shipped apps at incredible scale using various Ampersand modules.</p>
<p>There is no “core” module. You <code>npm install</code> only what you need.</p>
<p>We didn’t set out to make a framework. <a href="http://andyet.com/">&yet</a> has been using this toolset to build apps for clients and ourselves for years (i.e. <a href="http://talky.io/">Talky</a>). Eventually we documented <a href="https://blog.andyet.com/2014/06/25/introducing-ampersand-js">and released</a> it with an MIT license.</p>
<p>Ampersand.js was heavily influenced by the Node.js community and <a href="https://blog.andyet.com/2015/04/14/frontend-frameworks-to-pair-with-node">pairs well</a> with teams that already use Node.js.</p>
<p>We support modern browsers (for IE that means IE9+).</p>
<h3>Maximize simplicity</h3>
<p><em>If you don’t actively fight for simplicity in software, complexity will win, and it will suck.</em></p>
<h2>Key items to understand</h2>
<ul>
<li>Ampersand.js is designed to be used with a module bundler like <a href="http://browserify.org/">Browserify</a> or <a href="http://webpack.github.io/">Webpack</a>. If you’ve never used one of those read our <a href="http://ampersandjs.com/learn/npm-browserify-and-modules">intro to npm, Browserify, and Modules</a>.</li>
<li>Ampersand.js is optimized for mixing-and-matching with other stuff. Financial Times used ampersand-state and ampersand-view combined with <a href="http://d3js.org/">D3.js</a> to make a <a href="http://www.ft.com/ig/sites/2014/debt-to-gdp-ratio/#usa">world debt visualizer</a>. Both <a href="https://www.whatsapp.com/">WhatsApp</a> and <a href="http://www.flipkart.com/">FlipKart</a> use React as the view layer. Having that level of flexibility is one of the main reasons we created Ampersand.js to begin with.</li>
<li>Everything is installed via npm. If you need to install from bower + npm that’s possible with <a href="http://jspm.io/">jspm.io</a>, but most of our users just use npm.</li>
<li>Everything is MIT licensed.</li>
<li>We use strict <a href="http://semver.org/">semver</a> for versioning.</li>
<li>Ampersand.js is built and maintained by <a href="http://ampersandjs.com/contribute">a great community of friendly folks</a>.</li>
</ul>
<h2>Where do I start?</h2>
<ul>
<li><a href="http://ampersandjs.com/learn">the guides</a></li>
<li><a href="http://ampersandjs.com/docs">the documentation</a></li>
<li><a href="https://gitter.im/AmpersandJS/AmpersandJS">the community chat room</a></li>
</ul>
<h2>More reading</h2>
<ul>
<li>Great intro post <a href="http://silvdb.github.io/2015/04/20/ampersand-js-in-a-nutshell/">Ampersand.js in a nutshell</a> by a community member, <a href="https://twitter.com/Silvdb">Silke Van den Broeck</a>.</li>
<li><a href="#book">Human JavaScript</a> free online book by Ampersand’s instigator <a href="https://twitter.com/henrikjoreteg">Henrik Joreteg</a>.</li>
</ul><a class="button button-primary" href="/learn">Discover Ampersand.js</a>
</div>
<hr>
<div class="callout community" id="who">
<h2>See who is using Ampersand.js today</h2>
<div class="users-list"><a class="logo" href="https://yahoo.com/"><img src="/public/images/logo-yahoo.png"></a><a class="logo" href="http://www.ft.com/home/us"><img src="/public/images/logo-financial-times.png"></a><a class="logo" href="http://aviture.us.com/"><img src="/public/images/logo-aviture.png"></a><a class="logo" href="https://teamweek.com/"><img src="/public/images/logo-teamweek.png"></a><a class="logo" href="http://www.sinfo.org/"><img src="/public/images/logo-sinfo.png"></a><a class="logo tall" href="http://www.mrn.org/"><img src="/public/images/logo-mind-research-network.png"></a><a class="logo tall" href="http://www.pnnl.gov/"><img src="/public/images/logo-pnnl.png"></a><a class="logo" href="https://www.whatsapp.com/"><img src="/public/images/logo-whatsapp.png"></a><a class="logo" href="http://www.flipkart.com/"><img src="/public/images/logo-flipkart.png"></a><a class="logo" href="https://www.neoscores.com/"><img src="/public/images/logo-neoscores.png"></a><a class="logo" href="http://www.shutterfly.com"><img src="/public/images/logo-shutterfly.png"></a><a class="logo" href="http://hybrosys.com/"><img src="/public/images/logo-hybrosys.png"></a><a class="logo" href="http://zimmer7.com/"><img src="/public/images/logo-zimmer7.png"></a><a class="logo" href="https://www.bookwidgets.com/"><img src="/public/images/logo-bookwidgets.png"></a><a class="logo tall" href="https://yola.com/"><img src="/public/images/logo-yola.png"></a><a class="logo tall" href="https://federalist.18f.gov/"><img src="/public/images/logo-18f.png"></a><a class="logo" href="https://www.thirdlane.com/products/thirdlane-connect"><img src="/public/images/logo-thirdlane.png"></a></div>
<p>Is your team using Ampersand.js? Let us know!</p><a class="button button-primary" href="https://github.com/ampersandjs/ampersandjs.com/issues/new?title=Add%20my%20logo%20to%20the%20homepage&body=We%20use%20Ampersand.js%20for%20____%20and%20you%20can%20find%20our%20logo%20____.">Submit your logo</a>
</div>
<hr>
<div class="callout human-javascript" id="book">
<h2>A foundation for building simple but powerful JS apps with Ampersand.js</h2><img class="humanjs-ipad" src="/public/images/human-javascript.png"><a class="logo logo-humanjs" href="http://humanjavascript.com/">Human JavaScript</a>
<p>Henrik Joreteg introduces practical patterns for powerfully simple application development. <a href="http://humanjavascript.com/"><em>Human Javascript</em></a> offers a practical way to write JS.
</p><a class="button button-secondary" href="https://gumroad.com/l/humanjs">Buy the book for $39</a><a class="button button-secondary" href="http://read.humanjavascript.com/">Read it free online</a>
</div>
<hr>
<div class="callout modules-list">
<h2>Recent Releases</h2>
<div class="cf">
<div class="module-card">
<h4 class="module-name">ampersand-view</h4>
<p class="module-version">v10.0.3 – Jun 07, 2018</p>
<p class="module-links"><a href="https://github.com/ampersandjs/ampersand-view">github</a><a href="https://www.npmjs.org/package/ampersand-view">npm</a></p>
</div>
<div class="module-card">
<h4 class="module-name">ampersand-form-view</h4>
<p class="module-version">v7.1.0 – May 18, 2018</p>
<p class="module-links"><a href="https://github.com/ampersandjs/ampersand-form-view">github</a><a href="https://www.npmjs.org/package/ampersand-form-view">npm</a></p>
</div>
<div class="module-card">
<h4 class="module-name">ampersand-collection</h4>
<p class="module-version">v2.0.2 – Jan 09, 2018</p>
<p class="module-links"><a href="https://github.com/ampersandjs/ampersand-collection">github</a><a href="https://www.npmjs.org/package/ampersand-collection">npm</a></p>
</div>
</div><a class="button button-primary" href="/contribute">How to contribute</a>
</div>
<hr>
<div class="callout">
<h2>Need help with Ampersand.js?</h2><a class="logo logo-andyet" href="https://andyet.com">&yet</a>
<p>Node and Ampersand.js consulting from <a href="https://andyet.com">&yet</a>. We help companies ship products from custom apps to the most battle-tested enterprise software.</p>
</div>
</section>
<footer class="footer-main">
<nav class="nav-footer cf">
<div><a class="nav-item" href="/learn">Learn</a><a class="nav-item" href="/docs">Docs</a><a class="nav-item" href="http://tools.ampersandjs.com">Modules</a></div>
<div><a class="nav-item external" href="http://amp.ampersandjs.com/">Amp</a><a class="nav-item external" href="https://gitter.im/AmpersandJS/AmpersandJS">Chatroom</a><a class="nav-item" href="/contribute">Contribute</a></div>
<div><a class="nav-item" href="/security">Security</a><a class="nav-item" href="https://github.com/ampersandjs">Github</a><a class="nav-item" href="https://twitter.com/ampersandjs">Twitter</a></div>
</nav>
<p>Sponsored by <a href="https://andyet.com">&yet</a><br>with the help of our <a href="/contribute">contributors</a></p><a class="logo logo-ampersand-gray" href="/">&</a>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44685415-1', 'humanjavascript.com');
ga('send', 'pageview');
</script>
<script src="/public/js/highlight.pack.js"></script>
<script>
hljs.configure({classPrefix: ''});
hljs.initHighlightingOnLoad();
</script>
</body>
</html>