-
Notifications
You must be signed in to change notification settings - Fork 40
/
index.pug
136 lines (113 loc) · 7.8 KB
/
index.pug
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
extends templates/layout
block vars
- var pageTitle = "Home"
- var description = "Ampersand.js, Javascript, ampersand, Node.js, Apps, HTML5"
block content
header.hero
.illustration.beach
img(src="/public/images/ampersand-at-the-beach.svg")
h1 A highly modular, loosely coupled, non-frameworky framework for building advanced JavaScript apps.
hr
section.splash
.intro.container.cf
h2 What is Ampersand.js?
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 <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 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 There is no “core” module. You <code>npm install</code> only what you need.
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 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 We support modern browsers (for IE that means IE9+).
h3 Maximize simplicity
p
em If you don’t actively fight for simplicity in software, complexity will win, and it will suck.
h2 Key items to understand
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 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 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 Everything is MIT licensed.
li We use strict <a href="http://semver.org/">semver</a> for versioning.
li Ampersand.js is built and maintained by <a href="http://ampersandjs.com/contribute">a great community of friendly folks</a>.
h2 Where do I start?
ul
li <a href="http://ampersandjs.com/learn">the guides</a>
li <a href="http://ampersandjs.com/docs">the documentation</a>
li <a href="https://gitter.im/AmpersandJS/AmpersandJS">the community chat room</a>
h2 More reading
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 <a href="#book">Human JavaScript</a> free online book by Ampersand’s instigator <a href="https://twitter.com/henrikjoreteg">Henrik Joreteg</a>.
a.button.button-primary(href="/learn") Discover Ampersand.js
hr
#who.callout.community
h2 See who is using Ampersand.js today
.users-list
a.logo(href="https://yahoo.com/")
img(src="/public/images/logo-yahoo.png")
a.logo(href="http://www.ft.com/home/us")
img(src="/public/images/logo-financial-times.png")
a.logo(href="http://aviture.us.com/")
img(src="/public/images/logo-aviture.png")
a.logo(href="https://teamweek.com/")
img(src="/public/images/logo-teamweek.png")
a.logo(href="http://www.sinfo.org/")
img(src="/public/images/logo-sinfo.png")
a.logo.tall(href="http://www.mrn.org/")
img(src="/public/images/logo-mind-research-network.png")
a.logo.tall(href="http://www.pnnl.gov/")
img(src="/public/images/logo-pnnl.png")
a.logo(href="https://www.whatsapp.com/")
img(src="/public/images/logo-whatsapp.png")
a.logo(href="http://www.flipkart.com/")
img(src="/public/images/logo-flipkart.png")
a.logo(href="https://www.neoscores.com/")
img(src="/public/images/logo-neoscores.png")
a.logo(href="http://www.shutterfly.com")
img(src="/public/images/logo-shutterfly.png")
a.logo(href="http://hybrosys.com/")
img(src="/public/images/logo-hybrosys.png")
a.logo(href="http://zimmer7.com/")
img(src="/public/images/logo-zimmer7.png")
a.logo(href="https://www.bookwidgets.com/")
img(src="/public/images/logo-bookwidgets.png")
a.logo.tall(href="https://yola.com/")
img(src="/public/images/logo-yola.png")
a.logo.tall(href="https://federalist.18f.gov/")
img(src="/public/images/logo-18f.png")
a.logo(href="https://www.thirdlane.com/products/thirdlane-connect")
img(src="/public/images/logo-thirdlane.png")
p Is your team using Ampersand.js? Let us know!
a.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
hr
#book.callout.human-javascript
h2 A foundation for building simple but powerful JS apps with Ampersand.js
img.humanjs-ipad(src="/public/images/human-javascript.png")
//- Needs svg and png fallback
a.logo.logo-humanjs(href="http://humanjavascript.com/") Human JavaScript
p Henrik Joreteg introduces practical patterns for powerfully simple application development.
a(href="http://humanjavascript.com/")
em Human Javascript
= ' '
| offers a practical way to write JS.
a.button.button-secondary(href="https://gumroad.com/l/humanjs") Buy the book for $39
a.button.button-secondary(href="http://read.humanjavascript.com/") Read it free online
hr
.callout.modules-list
h2 Recent Releases
.cf
for module in recent
- var split = new Date(module.time[module['dist-tags'].latest]).toDateString().split(' ');
- var dateString = split.slice(1, 3).join(' ') + ', ' + split[3];
.module-card
h4.module-name= module.name
p.module-version= 'v' + module['dist-tags'].latest + ' – ' + dateString
p.module-links
a(href= module.homepage) github
a(href= module.npmlink) npm
a.button.button-primary(href="/contribute") How to contribute
hr
.callout
h2 Need help with Ampersand.js?
a.logo.logo-andyet(href="https://andyet.com") &yet
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.