-
Notifications
You must be signed in to change notification settings - Fork 27
/
index.html
160 lines (141 loc) · 8.36 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="weekly handbook about unhosted web apps" />
<title>unhosted web apps</title>
<link rel="stylesheet" href="/adventures/hljs/default.min.css" />
<link rel="hub" href="http://pubsubhubbub.appspot.com/"/>
<link rel="updates alternate" type="application/atom+xml" href="/adventures/feed.atom" />
<link rel="author" type="text/html" href="http://michielbdejong.com/"/>
<meta name="monetization" content="$twitter.xrptipbot.com/michielbdejong" />
<script src="/adventures/hljs/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<link rel="stylesheet" href="/adventures/adventures.css" />
</head>
<body>
<article>
<header>
<h1>unhosted web apps</h1>
<h2>freedom from web 2.0's monopoly platforms</h2>
</header>
<h2>definition</h2>
<p style="margin-top:3em; border-radius:1em; box-shadow:0 0 1em #D0D0D0; padding: 1em">Also known as "serverless", "client-side",
or "static" web apps, unhosted web apps do not send
your user data to their server.
Either you connect your own server at runtime,
or your data stays within the browser.</p>
<h3 style="margin-top:2.5em">advantages compared to native (iOS, Android) apps</h3>
<ul>
<li>web apps work on any device, no matter which platform or provider</li>
<li>you can get apps from any website, not just through a censored app store
<!-- with only the minor regrettable exception of <a href="https://groups.google.com/a/chromium.org/d/topic/chromium-apps/AZcMm413xww/discussion">Chrome packaged apps</a> --></li>
</ul>
<h3 style="margin-top:2em">advantages compared to hosted web apps</h3>
<ul>
<li>choose your server provider independently of which apps you use</li>
<li>likewise, your choice of apps is not narrowed down by your storage provider</li>
<li>the app provider no longer gets to see your data by default</li>
<li>unhosted web apps are cheaper to publish than hosted ones</li>
<li>unhosted web apps can easily be mirrored for kill-switch resilience</li>
<li>infinite per-app backend scalability (there simply <em>is</em> no per-app backend)</li>
</ul>
<h3 style="margin-top:2em">what? no backend? so the whole app is actually client-side?</h3>
<p style="text-align:center; margin-top:2em; border-radius:1em; box-shadow:0 0 1em #D0D0D0; padding: 1em"><img src="/img/flyer/unhosted_web20.png" /></p>
<p style="text-align:center">your everyday LAMP-stack, J2SE, .net, or Ruby-on-Rails hosted web app</p>
<h3 style="margin-top:3em">yep. over http, you receive the app's <em>source code</em>, rather than an opaque user interface. take a minute to wrap your head around this…</h3>
<p style="text-align:center; margin-top:5em; border-radius:1em; box-shadow:0 0 1em #D0D0D0; padding: 1em"><img src="/img/flyer/unhosted_arch.png" /></p>
<p style="text-align:center">the new “unhosted web app” architecture</p>
<h3 style="margin-top:3em">… and then
<a href="/adventures/1/Personal-servers-and-unhosted-web-apps.html">read on</a>,
<a href="/tools/">learn about tools</a>,
or <a href="/getting-started/">build your first app</a>!</h3>
</article>
<div class="logo">
<img src="../../img/island-color.png" />
</div>
<nav>
<div>
<h4>Overview:</h4>
<p><strong>i. definition</strong></p>
<p> ii. <a href="/getting-started/">getting started</a></p>
<p> iii. <a href="/apps/">example apps</a></p>
<p> iv. <a href="/people/">people</a></p>
<p> v. <a href="/events/">events</a></p>
<p> vi. <a href="/tools/">dev tools</a></p>
<p> vii. <a href="/using-solid/">using solid</a></p>
<p> viii. <a href="https://groups.google.com/forum/#!forum/unhosted">forum</a></p>
<h4><a href="https://unhosted.org/book/">(all episodes as a book)</a></h4>
<h4>(<a href="https://unhosted.org/book.pdf">.pdf</a>)(<a href="https://unhosted.org/book.epub">.epub</a>) (<a href="https://unhosted.org/book.mobi">.mobi</a>) </h4>
<h4>Adventures:</h4>
<p> 1. <a href="/adventures/1/Personal-servers-and-unhosted-web-apps.html">intro</a></p>
<p> 2. <a href="/adventures/2/An-unhosted-editor.html">editor</a></p>
<p> 3. <a href="/adventures/3/Setting-up-your-personal-server.html">server</a></p>
<p> 4. <a href="/adventures/4/WebSockets.html">WebSockets</a></p>
<p> 5. <a href="/adventures/5/Facebook-and-Twitter-from-nodejs.html">social</a></p>
<p> 6. <a href="/adventures/6/Controlling-your-server-over-a-WebSocket.html">webshell</a></p>
<p> 7. <a href="/adventures/7/Adding-remote-storage-to-unhosted-web-apps.html">remoteStorage</a></p>
<p> 8. <a href="/adventures/8/Collecting-and-organizing-your-data.html">your data</a></p>
<p> 9. <a href="/adventures/9/Sending-and-receiving-email-from-unhosted-web-apps.html">email</a></p>
<p> 10. <a href="/adventures/10/Linking-things-together-on-the-world-wide-web.html">web linking</a></p>
<p> 11. <a href="/adventures/11/App-hosting.html">app hosting</a></p>
<p> 12. <a href="/adventures/12/App-discovery.html">app discovery</a></p>
<p> 13. <a href="/adventures/13/Dealing-with-users-in-unhosted-web-apps.html">users</a></p>
<p> 14. <a href="/adventures/14/Peer-to-peer-communication.html">p2p</a></p>
<p> 15. <a href="/adventures/15/Unhosted-web-apps-and-OAuth.html">unhosted oauth</a></p>
<p> 16. <a href="/adventures/16/Our-plan-to-save-the-web.html">save the web</a></p>
<h4>Decentralize:</h4>
<p> 17. <a href="/decentralize/17/Cryptography.html">cryptography</a></p>
<p> 18. <a href="/decentralize/18/Distributed-hash-tables.html">dht</a></p>
<p> 19. <a href="/decentralize/19/BGP,-IP,-DNS,-HTTP,-TLS,-and-NAT.html">internet</a></p>
<p> 20. <a href="/decentralize/20/Persona,-OpenID,-SAML,-WebID,-and-Webfinger.html">identity</a></p>
<p> 21. <a href="/decentralize/21/Client-side-sessions,-origins,-browser-tabs,-and-WebIntents.html">browser sessions</a></p>
<p> 22. <a href="/decentralize/22/How-to-locate-resources.html">search</a></p>
<p> 23. <a href="/decentralize/23/Network-neutrality,-ubiquitous-wifi,-and-DRM.html">neutrality</a></p>
<p> 24. <a href="/decentralize/24/Decentralizing-the-web-by-making-it-federated.html">federation</a></p>
<p> 25. <a href="/decentralize/25/Anonymity.html">anonymity</a></p>
<p> 26. <a href="/decentralize/26/Decentralized-reputation-systems.html">reputation</a></p>
<h4>Practice:</h4>
<p> 27. <a href="/practice/27/Persisting-data-in-browser-storage.html">browser storage</a></p>
<p> 28. <a href="/practice/28/Synchronizing-browser-storage-with-server-storage.html">sync</a></p>
<p> 29. <a href="/practice/29/Offline-first-web-app-design.html">offline first</a></p>
<p> 30. <a href="/practice/30/Backend-as-a-Service-platforms.html">baas</a></p>
<p> 31. <a href="/practice/31/Allowing-the-user-to-choose-the-backend-server.html">per-user backend</a></p>
<p> 32. <a href="/practice/32/Client-side-libraries-for-per-user-backend.html">per-user clients</a></p>
<p> 33. <a href="/practice/33/Client-side-frontend-development.html">client-side frontend</a></p>
<p> 34. <a href="/practice/34/Conclusions.html">conclusions</a></p>
</div>
<div>
<h4>Supporters:</h4>
<p>
<a class="logo" href="http://nlnet.nl/">
<img src="../../img/nlnet.png" />
</a>
</p>
<p>
<a class="logo" href="http://wauland.de/">
<img src="../../img/wau.png" />
</a>
</p>
<p>
<a class="logo" href="http://www.gabrielweinberg.com/blog/2012/03/duckduckgo-foss-donations-2011.html">
<img src="../../img/duckduckgo.jpg" />
</a>
</p>
<p>
and <a href="../../thankyou.html">many more</a>…
</p>
</div>
</nav>
<footer>
<strong>You can follow</strong>
<img src="../../img/twitter.png" /><a target="_blank" href="https://twitter.com/unhosted">@unhosted</a>
<strong>on twitter and in</strong>
<a href="/adventures/1/Personal-servers-and-unhosted-web-apps.html#follow">many other ways</a><strong>. So stay tuned! :)</strong>
</strong>
</footer>
</body>
</html>