feather-ts
Version:
Lightweight javascript framework with REST, routing, bindings, message hub and event delegation (under 10kb gzipped)
475 lines (309 loc) • 12.4 kB
HTML
<html class="no-js">
<head lang="en-us">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<title>Featherₜₛ</title>
<meta name="generator" content="Hugo 0.18.1" />
<meta name="description" content="Feather TS - official Website">
<link rel="canonical" href="//www.feather-ts.com/">
<meta name="author" content="Andreas Prudzilko">
<meta property="og:url" content="//www.feather-ts.com/">
<meta property="og:title" content="Featherₜₛ">
<meta property="og:image" content="//www.feather-ts.com/images/logo.svg">
<meta name="apple-mobile-web-app-title" content="Featherₜₛ">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="shortcut icon" type="image/x-icon" href="//www.feather-ts.com/images/favicon.ico">
<link rel="icon" type="image/x-icon" href="//www.feather-ts.com/images/favicon.ico">
<style>
@font-face {
font-family: 'Icon';
src: url('//www.feather-ts.com/fonts/icon.eot');
src: url('//www.feather-ts.com/fonts/icon.eot')
format('embedded-opentype'),
url('//www.feather-ts.com/fonts/icon.woff')
format('woff'),
url('//www.feather-ts.com/fonts/icon.ttf')
format('truetype'),
url('//www.feather-ts.com/fonts/icon.svg')
format('svg');
font-weight: normal;
font-style: normal;
}
</style>
<link rel="stylesheet" href="//www.feather-ts.com/stylesheets/application.css">
<link rel="stylesheet" href="//www.feather-ts.com/stylesheets/temporary.css">
<link rel="stylesheet" href="//www.feather-ts.com/stylesheets/palettes.css">
<link rel="stylesheet" href="//www.feather-ts.com/stylesheets/highlight/highlight.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Ubuntu:400,700|Ubuntu+Mono">
<style>
body, input {
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
}
pre, code {
font-family: 'Ubuntu Mono', 'Courier New', 'Courier', monospace;
}
</style>
<link rel="stylesheet" href="//www.feather-ts.com/css/tweaks.css">
<script src="//www.feather-ts.com/javascripts/modernizr.js"></script>
<link href="//www.feather-ts.com/index.xml" rel="alternate" type="application/rss+xml" title="Featherₜₛ" />
<link href="//www.feather-ts.com/index.xml" rel="feed" type="application/rss+xml" title="Featherₜₛ" />
</head>
<body class="palette-primary-deep-purple palette-accent-cyan">
<div class="backdrop">
<div class="backdrop-paper"></div>
</div>
<input class="toggle" type="checkbox" id="toggle-drawer">
<input class="toggle" type="checkbox" id="toggle-search">
<label class="toggle-button overlay" for="toggle-drawer"></label>
<header class="header">
<nav aria-label="Header">
<div class="bar default">
<div class="button button-menu" role="button" aria-label="Menu">
<label class="toggle-button icon icon-menu" for="toggle-drawer">
<span></span>
</label>
</div>
<div class="stretch">
<div class="title">
Featherₜₛ
</div>
</div>
<div class="button button-github" role="button" aria-label="GitHub">
<a href="https://github.com/mendrik" title="@mendrik on GitHub" target="_blank" class="toggle-button icon icon-github"></a>
</div>
</div>
<div class="bar search">
<div class="button button-close" role="button" aria-label="Close">
<label class="toggle-button icon icon-back" for="toggle-search"></label>
</div>
<div class="stretch">
<div class="field">
<input class="query" type="text" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck>
</div>
</div>
<div class="button button-reset" role="button" aria-label="Search">
<button class="toggle-button icon icon-close" id="reset-search"></button>
</div>
</div>
</nav>
</header>
<main class="main">
<div class="drawer">
<nav aria-label="Navigation">
<a href="https://github.com/mendrik/feather" class="project">
<div class="banner">
<div class="logo">
<img src="//www.feather-ts.com/images/logo.svg">
</div>
<div class="name">
<strong>Featherₜₛ <span class="version">ᴮᵉᵗᵃ</span></strong>
<br>
mendrik/feather
</div>
</div>
</a>
<div class="scrollable">
<div class="wrapper">
<ul class="repo">
<li class="repo-download">
<a href="https://github.com/mendrik/feather/archive/master.zip" target="_blank" title="Download" data-action="download">
<i class="icon icon-download"></i> Download
</a>
</li>
<li class="repo-stars">
<a href="https://github.com/mendrik/feather/stargazers" target="_blank" title="Stargazers" data-action="star">
<i class="icon icon-star"></i> Stars
<span class="count">–</span>
</a>
</li>
</ul>
<hr>
<div class="toc">
<ul>
<li>
<a class="current" title="Introduction" href="//www.feather-ts.com/">
Introduction
</a>
<ul id="scrollspy">
</ul>
</li>
<li>
<a title="Getting started" href="//www.feather-ts.com/getting-started/">
Getting started
</a>
</li>
<li>
<a title="API" href="//www.feather-ts.com/api/">
API
</a>
</li>
<li>
<a title="Example" href="//www.feather-ts.com/example/">
Example
</a>
</li>
</ul>
<hr>
<span class="section">The author</span>
<ul>
<li>
<a href="https://github.com/mendrik" target="_blank" title="@mendrik on GitHub">
@mendrik on GitHub
</a>
</li>
<li>
<a href="mailto:mendrik76@gmail.com" title="Email of mendrik76@gmail.com">
Contact via email
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<article class="article">
<div class="wrapper">
<h1>Introduction </h1>
<p>Featherₜₛ is a small component framework written in <a href="https://www.typescriptlang.org/">TypeScript</a>.
Whether you are writing embeddable javascript widgets or a single page application this framework
might be of use. With less than 8kb in size it is suited for mobile apps and desktop alike.
It is especially well suited for the consumption of restful services.</p>
<p>The framework offers the following features:</p>
<ul>
<li>Each component is holding logic, view and model in a single file</li>
<li>Components automatically build a hierarchical tree</li>
<li>Message hub between components</li>
<li>REST access</li>
<li>Routing via hash or history API</li>
<li>Very flat learning curve due</li>
<li>Logicless templates in pure HTML with very simple binding syntax</li>
<li>Event delegation out of the box</li>
<li>Written in TypeScript</li>
<li>No module loaders needed, embed directly via NPM</li>
<li>With aynchronous decorators no need for <em>promises</em></li>
<li>Support for modern browsers including IE9
<br /></li>
</ul>
<p>You can checkout a todomvc demo <a href="http://todo.feather-ts.com">here</a>.</p>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>This project is in its infancy, so if you want something production ready, you
should probably check out react, angular or any of the myriad of MVC frameworks out there with way
better documenation and community support than feather will ever have.</p>
</div>
<p>As soon as the framework is stable enough to be released to the public I will disclose the github repository.
Right now it is just work in progress, thus use it at your own risk. If you find any problems feel free to
drop me an <a href="mailto:mendrik76@gmail.com">email</a>.
<br><br></p>
<aside class="copyright" role="note">
Documentation built with
<a href="https://www.gohugo.io" target="_blank">Hugo</a>
using the
<a href="http://github.com/digitalcraftsman/hugo-material-docs" target="_blank">Material</a> theme.
</aside>
<footer class="footer">
<nav class="pagination" aria-label="Footer">
<div class="previous">
</div>
<div class="next">
<a href="//www.feather-ts.com/getting-started/" title="Getting started">
<span class="direction">
Next
</span>
<div class="page">
<div class="stretch">
<div class="title">
Getting started
</div>
</div>
<div class="button button-next" role="button" aria-label="Next">
<i class="icon icon-forward"></i>
</div>
</div>
</a>
</div>
</nav>
</footer>
</div>
</article>
<div class="results" role="status" aria-live="polite">
<div class="scrollable">
<div class="wrapper">
<div class="meta"></div>
<div class="list"></div>
</div>
</div>
</div>
</main>
<script>
var base_url = '\/\/www.feather-ts.com\/';
var repo_id = 'mendrik\/feather';
</script>
<script src="//www.feather-ts.com/javascripts/application.js"></script>
<script>
/* Add headers to scrollspy */
var headers = document.getElementsByTagName("h2");
var scrollspy = document.getElementById('scrollspy');
if(scrollspy) {
if(headers.length > 0) {
for(var i = 0; i < headers.length; i++) {
var li = document.createElement("li");
li.setAttribute("class", "anchor");
var a = document.createElement("a");
a.setAttribute("href", "#" + headers[i].id);
a.setAttribute("title", headers[i].innerHTML);
a.innerHTML = headers[i].innerHTML;
li.appendChild(a)
scrollspy.appendChild(li);
}
} else {
scrollspy.parentElement.removeChild(scrollspy)
}
/* Add permanent link next to the headers */
var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
for(var i = 0; i < headers.length; i++) {
var a = document.createElement("a");
a.setAttribute("class", "headerlink");
a.setAttribute("href", "#" + headers[i].id);
a.setAttribute("title", "Permanent link")
a.innerHTML = "#";
headers[i].appendChild(a);
}
}
</script>
<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-84969611-1', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
var buttons = document.querySelectorAll('a');
Array.prototype.map.call(buttons, function(item) {
if (item.host != document.location.host) {
item.addEventListener('click', function() {
var action = item.getAttribute('data-action') || 'follow';
ga('send', 'event', 'outbound', action, item.href);
});
}
});
var query = document.querySelector('.query');
query.addEventListener('blur', function() {
if (this.value) {
var path = document.location.pathname;
ga('send', 'pageview', path + '?q=' + this.value);
}
});
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>