awesome-awesomeness/html/typescriptprojects.html

<h1 id="awesome-typescript-projects-awesome">awesome-typescript-projects
<a href="https://github.com/sindresorhus/awesome"><img
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
alt="Awesome" /></a></h1>
<p>awesome typescript open source projects.</p>
<h2 id="contributing">Contributing</h2>
<p>Please take a quick look at the <a
href="/contributing.md">contribution guidelines</a> first. If you see a
package or project here that is no longer maintained or is not a good
fit, please submit a pull request to improve this file, Thanks.</p>
<h2 id="typescript">TypeScript</h2>
<h3
id="typescript---typescript-is-a-superset-of-javascript-that-compiles-to-clean-javascript-output."><a
href="https://github.com/Microsoft/TypeScript">TypeScript</a> -
TypeScript is a superset of JavaScript that compiles to clean JavaScript
output.</h3>
<p>TypeScript is a language for application-scale JavaScript. TypeScript
adds optional types, classes, and modules to JavaScript. TypeScript
supports tools for large-scale JavaScript applications for any browser,
for any host, on any OS. TypeScript compiles to readable,
standards-based JavaScript.</p>
<h3
id="definitelytyped---for-high-quality-typescript-type-definitions"><a
href="https://github.com/DefinitelyTyped/DefinitelyTyped">DefinitelyTyped</a>
- for high quality TypeScript type definitions</h3>
<hr />
<h2 id="learning-resources">Learning Resources</h2>
<h3
id="typescript-handbook---the-typescript-handbook-is-a-comprehensive-guide-to-the-typescript-language"><a
href="https://github.com/Microsoft/TypeScript-Handbook">TypeScript-Handbook</a>
- The TypeScript Handbook is a comprehensive guide to the TypeScript
language</h3>
<h3
id="typescript-book---the-definitive-guide-to-typescript-and-possibly-the-best-typescript-book"><a
href="https://github.com/basarat/typescript-book">typescript-book</a> -
The definitive guide to TypeScript and possibly the best TypeScript
book</h3>
<h3
id="design_patterns_in_typescript---here-are-the-implementations-of-the-following-design-patterns-in-typescript"><a
href="https://github.com/torokmark/design_patterns_in_typescript">design_patterns_in_typescript</a>
- Here are the implementations of the following design patterns in
TypeScript</h3>
<h3 id="typescriptsamples---samples-for-typescript"><a
href="https://github.com/Microsoft/TypeScriptSamples">TypeScriptSamples</a>
- Samples for TypeScript</h3>
<h3 id="angular-styleguide---angularjs-styleguide-for-teams"><a
href="https://github.com/toddmotto/angular-styleguide">angular-styleguide</a>
- AngularJS styleguide for teams</h3>
<h3
id="angular2-education---a-list-of-helpful-material-to-develop-using-angular"><a
href="https://github.com/timjacobi/angular2-education">angular2-education</a>
- A list of helpful material to develop using Angular</h3>
<h3
id="angular2typescript---code-samples-from-the-book-angular-2-development-with-typescript"><a
href="https://github.com/Farata/angular2typescript">angular2typescript</a>
- Code samples from the book Angular 2 Development with TypeScript</h3>
<h3
id="todomvc-redux-react-typescript---todomvc-example-using-redux-react-and-typescript"><a
href="https://github.com/jaysoo/todomvc-redux-react-typescript">todomvc-redux-react-typescript</a>
- TodoMVC example using Redux, React, and Typescript</h3>
<hr />
<h2 id="ide">IDE</h2>
<h3 id="vscode---the-best-open-source-ide"><a
href="https://github.com/Microsoft/vscode">vscode</a> - The best open
source IDE</h3>
<p>VS Code is a new type of tool that combines the simplicity of a code
editor with what developers need for their core edit-build-debug cycle.
Code provides comprehensive editing and debugging support, an
extensibility model, and lightweight integration with existing
tools.</p>
<p><img
src="https://cloud.githubusercontent.com/assets/11839736/16642200/6624dde0-43bd-11e6-8595-c81885ba0dc2.png" /></p>
<h3 id="monaco-editor---a-browser-based-code-editor"><a
href="https://github.com/Microsoft/monaco-editor">monaco-editor</a> - A
browser based code editor</h3>
<p>The Monaco Editor is the code editor that powers VS Code.</p>
<p><img
src="https://cloud.githubusercontent.com/assets/5047891/19600675/5eaae9e6-97a6-11e6-97ad-93903167d8ba.png" /></p>
<h3 id="alm---the-best-ide-for-typescript"><a
href="https://github.com/alm-tools/alm">ALM</a> - The best IDE for
TypeScript</h3>
<p>With great languages come great development tools.</p>
<p><img
src="https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/main.png" /></p>
<p><img
src="https://raw.githubusercontent.com/alm-tools/alm-tools.github.io/master/screens/blaster.gif" /></p>
<h3
id="superpowers---extensible-html5-app-for-real-time-collaborative-projects"><a
href="https://github.com/superpowers/superpowers-core">superpowers</a> -
Extensible HTML5 app for real-time collaborative projects</h3>
<p>Superpowers is a downloadable HTML5 app. You can use it solo like a
regular offline game maker, or setup a password and let friends join in
on your project through their Web browser. It’s great for working
together over long periods of time, for jamming over a weekend, or just
for helping each other out with debugging!</p>
<p><img
src="https://camo.githubusercontent.com/70aeb8dce6a944e4c7b0562b7e9dbee270ffca28/687474703a2f2f692e696d6775722e636f6d2f6734694e6c456e2e706e67" /></p>
<h3 id="eve---better-tools-for-thought"><a
href="https://github.com/witheve/eve">eve</a> - Better tools for
thought</h3>
<p>Eve is a programming language and IDE based on years of research into
building a human-first programming platform. You can play with Eve
online here: <a
href="http://play.witheve.com/">play.witheve.com</a>.</p>
<p><a href="http://play.witheve.com/#/examples/flappy.eve"><img
src="http://witheve.github.io/assets/images/editor.png"
alt="Play With Eve" /></a></p>
<h3 id="cats---code-assistant-for-typescript"><a
href="https://github.com/jbaron/cats">cats</a> - Code Assistant for
TypeScript</h3>
<p>CATS is an IDE for TypeScript and Web developers. CATS is open source
software released under the Apache 2.0 license and runs on Linux,
Windows and OS X. CATS itself is also written in TypeScript, so you can
easily customize it to your needs if required.</p>
<p><img
src="https://camo.githubusercontent.com/cdadf09336bea233a036511c6649e2c4ecbc7fbd/68747470733a2f2f7261772e6769746875622e636f6d2f6a6261726f6e2f636174732f6d61737465722f6172746966616374732f636174735f73637265656e73686f742e706e67" /></p>
<h3 id="oni---modern-modal-editing---powered-by-neovim"><a
href="https://github.com/onivim/oni">oni</a> - Modern Modal Editing -
powered by Neovim</h3>
<p>The goal of this project is to provide both the full-fledged Vim
experience, with no compromises, while pushing forward to enable new
scenarios.</p>
<p>Modern UX - The Vim experience should not be compromised with poor
user experiences that stem from terminal limitations. Rich plugin
development - using JavaScript, instead of VimL, allowing deep-language
integration. Cross-platform support - across Windows, OS X, and Linux.
Batteries included - rich features are available out of the box -
minimal setup needed to be productive. TypeScript development is the
canonical example, but the hope is that other language providers will be
included. Later, an included package manager will make it simple to find
and install plugins. Performance - no compromises, Vim is fast, and Oni
should be fast too. Ease Learning Curve - without sacrificing the Vim
experience Vim is an incredible tool for manipulating text at the speed
of thought. With a composable, modal command language, it is no wonder
that Vim usage is still prevalent today even in the realm of modern
editors.</p>
<p>However, going from thought to code has some different challenges
than going from thought to text. IDEs today provide several benefits
that help to reduce cognitive load when writing code, and that benefit
is tremendously important - not only in terms of pure coding efficiency
and productivity, but also in making the process of writing code
enjoyable and fun.</p>
<p>The goal of this project is to give an editor that gives the best of
both worlds - the power, speed, and flexibility of using Vim for
manipulating text, as well as the rich tooling that comes with an
IDE.</p>
<p><img
src="https://camo.githubusercontent.com/7fbedfb69bc03b2c98178a8ca37ec64f03fe890b/68747470733a2f2f73332d75732d776573742d322e616d617a6f6e6177732e636f6d2f6f6e692d6d656469612f73637265656e73686f742d64617277696e2e706e67" /></p>
<hr />
<h2 id="framework">Framework</h2>
<h3 id="angular---one-framework.-mobile-desktop."><a
href="https://github.com/angular/angular">angular</a> - One framework.
Mobile &amp; desktop.</h3>
<p>Angular is a development platform for building mobile and desktop web
applications using Typescript/JavaScript (JS) and other languages.</p>
<h3 id="ngx-admin---angular-2-admin-dashboard-framework"><a
href="https://github.com/akveo/ngx-admin">ngx-admin</a> - Angular 2
admin dashboard framework</h3>
<p>Admin panel framework based on Angular 2, Bootstrap 4 and
Webpack.</p>
<p><a href="http://akveo.com/ngx-admin/">Demo Page</a></p>
<figure>
<img
src="https://camo.githubusercontent.com/33036bf7ec00d508575b5207a5799052cda93825/68747470733a2f2f692e696d6775722e636f6d2f586f4a7466764b2e676966"
alt="case" />
<figcaption aria-hidden="true">case</figcaption>
</figure>
<h3
id="angular-seed---extensible-reliable-and-modular-starter-project-for-angular-2-and-beyond-with-statically-typed-build-and-aot-compilation"><a
href="https://github.com/mgechev/angular-seed">angular-seed</a> -
Extensible, reliable and modular starter project for Angular 2 (and
beyond) with statically typed build and AoT compilation</h3>
<p>Provides fast, reliable and extensible starter for the development of
Angular projects.</p>
<h3
id="nativescript---nativescript-is-an-open-source-framework-for-building-truly-native-mobile-apps-with-javascript.-use-web-skills-like-angular-flexbox-and-css-and-get-native-ui-and-performance-on-ios-and-android"><a
href="https://github.com/NativeScript/NativeScript">NativeScript</a> -
NativeScript is an open source framework for building truly native
mobile apps with JavaScript. Use web skills, like Angular, FlexBox and
CSS, and get native UI and performance on iOS and Android</h3>
<p>NativeScript provides a best-of-both-worlds development experience.
Our cross-platform JavaScript modules give you the convenience of
writing iOS and Android apps from a single JavaScript codebase, while
our runtimes give you the power of accessing native APIs, SDKs, and
frameworks when you need them—all without needing to open Xcode or
Android Studio. NativeScript was created and is supported by
Telerik.</p>
<p><em>Mobile Case:</em></p>
<figure>
<img src="images/nativescript/case.png" alt="case" />
<figcaption aria-hidden="true">case</figcaption>
</figure>
<h3
id="ionic---build-amazing-native-and-progressive-web-apps-with-angular-and-open-web-technologies.-one-app-running-on-everything"><a
href="https://github.com/driftyco/ionic">ionic</a> - Build amazing
native and progressive web apps with Angular and open web technologies.
One app running on everything</h3>
<p>Ionic is the open-source mobile app development framework that makes
it easy to build top quality native and progressive web apps with web
technologies. Ionic is based on Angular and comes with many significant
performance, usability, and feature improvements over the past
versions.</p>
<p><em>Mobile Case:</em></p>
<figure>
<img src="images/ionic/case.png" alt="case" />
<figcaption aria-hidden="true">case</figcaption>
</figure>
<h3
id="ionic-native---native-features-for-mobile-apps-built-with-cordovaphonegap-and-open-web-technologies."><a
href="https://github.com/driftyco/ionic-native">ionic-native</a> -
Native features for mobile apps built with Cordova/PhoneGap and open web
technologies.</h3>
<p>Ionic Native is a curated set of wrappers for Cordova plugins that
make adding any native functionality you need to your Ionic, Cordova, or
Web View mobile app easy.</p>
<h3
id="egret---egret-is-a-brand-new-open-mobile-game-and-application-engine-which-allows-you-to-quickly-build-mobile-games-and-apps-on-androidios-and-windows."><a
href="https://github.com/egret-labs/egret-core">egret</a> - Egret is a
brand new open mobile game and application engine which allows you to
quickly build mobile games and apps on Android,iOS and Windows.</h3>
<p>Developed by Egret Technology, Egret Engine 4.0 includes a newly
built 3D engine and a 2D engine created based on HTML5. With its robust
cross-platform operability and commitment to solving the performance and
fragmentation problems of HTML5 APP and games, Egret Engine 4.0 will
perfectly meet developers’ needs.</p>
<p><em>Game Case:</em></p>
<figure>
<img src="images/egret/case.png" alt="case" />
<figcaption aria-hidden="true">case</figcaption>
</figure>
<h3
id="atomicgameengine---the-atomic-game-engine-is-a-multi-platform-2d-and-3d-engine-with-a-consistent-api-in-c-javascript-typescript-and-c"><a
href="https://github.com/AtomicGameEngine/AtomicGameEngine">AtomicGameEngine</a>
- The Atomic Game Engine is a multi-platform 2D and 3D engine with a
consistent API in C#, JavaScript, TypeScript, and C++</h3>
<p>The Atomic Game Engine is powerful 2D/3D technology developed by
industry veterans and contributors from around the world.</p>
<p>Atomic is lean, full source, technology for mobile and desktop. It
has a powerful core API with access to raw, down to the metal, native
performance. Atomic technology leverages industry standard languages and
tooling for use in games, education/training, serious applications, and
new growth areas such as AR/VR.</p>
<figure>
<img
src="https://camo.githubusercontent.com/d761a63cb469a09de3ffc2323099b4431b152cde/687474703a2f2f61746f6d696367616d65656e67696e652e636f6d2f696d616765732f686f6d652f526f626f4265616368323031372e706e67"
alt="case" />
<figcaption aria-hidden="true">case</figcaption>
</figure>
<h3
id="babylon.js---a-complete-javascript-framework-for-building-3d-games-with-html-5-and-webgl"><a
href="https://github.com/BabylonJS/Babylon.js">Babylon.js</a> - a
complete JavaScript framework for building 3D games with HTML 5 and
WebGL</h3>
<p>Getting started? Play directly with the Babylon.js API via our <a
href="http://www.babylonjs.com/playground">playground</a>. It contains
also lot of simple samples to learn how to use it.</p>
<figure>
<img src="images/babylonjs/case.png" alt="case" />
<figcaption aria-hidden="true">case</figcaption>
</figure>
<h3
id="cyclejs---a-functional-and-reactive-javascript-framework-for-predictable-code"><a
href="https://github.com/cyclejs/cyclejs">cyclejs</a> - A functional and
reactive JavaScript framework for predictable code</h3>
<p>Cycle’s core abstraction is your application as a pure function
main() where inputs are read effects (sources) from the external world
and outputs (sinks) are write effects to affect the external world.
These I/O effects in the external world are managed by drivers: plugins
that handle DOM effects, HTTP effects, etc.</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode ts"><code class="sourceCode typescript"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="kw">function</span> <span class="fu">main</span>(sources) {</span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> decrement$ <span class="op">=</span> sources<span class="op">.</span><span class="at">DOM</span></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a>    <span class="op">.</span><span class="fu">select</span>(<span class="st">&#39;.decrement&#39;</span>)<span class="op">.</span><span class="fu">events</span>(<span class="st">&#39;click&#39;</span>)<span class="op">.</span><span class="fu">mapTo</span>(<span class="op">-</span><span class="dv">1</span>)<span class="op">;</span></span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> increment$ <span class="op">=</span> sources<span class="op">.</span><span class="at">DOM</span></span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a>    <span class="op">.</span><span class="fu">select</span>(<span class="st">&#39;.increment&#39;</span>)<span class="op">.</span><span class="fu">events</span>(<span class="st">&#39;click&#39;</span>)<span class="op">.</span><span class="fu">mapTo</span>(<span class="op">+</span><span class="dv">1</span>)<span class="op">;</span></span>
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> action$ <span class="op">=</span> xs<span class="op">.</span><span class="fu">merge</span>(decrement$<span class="op">,</span> increment$)<span class="op">;</span></span>
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> count$ <span class="op">=</span> action$<span class="op">.</span><span class="fu">fold</span>((x<span class="op">,</span> y) <span class="kw">=&gt;</span> x <span class="op">+</span> y<span class="op">,</span> <span class="dv">0</span>)<span class="op">;</span></span>
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> vtree$ <span class="op">=</span> count$<span class="op">.</span><span class="fu">map</span>(count <span class="kw">=&gt;</span></span>
<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a>    <span class="fu">div</span>([</span>
<span id="cb1-13"><a href="#cb1-13" aria-hidden="true" tabindex="-1"></a>      <span class="fu">button</span>(<span class="st">&#39;.decrement&#39;</span><span class="op">,</span> <span class="st">&#39;Decrement&#39;</span>)<span class="op">,</span></span>
<span id="cb1-14"><a href="#cb1-14" aria-hidden="true" tabindex="-1"></a>      <span class="fu">button</span>(<span class="st">&#39;.increment&#39;</span><span class="op">,</span> <span class="st">&#39;Increment&#39;</span>)<span class="op">,</span></span>
<span id="cb1-15"><a href="#cb1-15" aria-hidden="true" tabindex="-1"></a>      <span class="fu">p</span>(<span class="st">&#39;Counter: &#39;</span> <span class="op">+</span> count)</span>
<span id="cb1-16"><a href="#cb1-16" aria-hidden="true" tabindex="-1"></a>    ])</span>
<span id="cb1-17"><a href="#cb1-17" aria-hidden="true" tabindex="-1"></a>  )<span class="op">;</span></span>
<span id="cb1-18"><a href="#cb1-18" aria-hidden="true" tabindex="-1"></a>  <span class="cf">return</span> { DOM<span class="op">:</span> vtree$ }<span class="op">;</span></span>
<span id="cb1-19"><a href="#cb1-19" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<h3
id="angular-seed-advanced---an-advanced-angular-seed-project-with-support-for-ngrxstore-ngrxeffects-ngx-translate-angulartics2-lodash-nativescript-native-mobile-electron-mac-windows-and-linux-desktop-and-more."><a
href="https://github.com/NathanWalker/angular-seed-advanced">angular-seed-advanced</a>
- An advanced Angular seed project with support for ngrx/store,
ngrx/effects, ngx-translate, angulartics2, lodash, NativeScript
(<em>native</em> mobile), Electron (Mac, Windows and Linux desktop) and
more.</h3>
<figure>
<img
src="https://camo.githubusercontent.com/b00e9ecb9c7b2e92ec9c9af1470002ce9d3ea878/68747470733a2f2f63646e2e66696c65737461636b636f6e74656e742e636f6d2f7a5a6c514b4b4b6a515561427239704c6b45564b"
alt="case" />
<figcaption aria-hidden="true">case</figcaption>
</figure>
<figure>
<img
src="https://camo.githubusercontent.com/2785b726e1f1d813d41a268d65f6b1b844ee0497/68747470733a2f2f643277703473686b6e6a63666a6c2e636c6f756466726f6e742e6e65742f6170692f66696c652f314f34465247735348533867304c7a33454b4e79"
alt="case" />
<figcaption aria-hidden="true">case</figcaption>
</figure>
<hr />
<h2 id="ui">UI</h2>
<h3 id="material2---material-design-components-for-angular"><a
href="https://github.com/angular/material2">material2</a> - Material
Design components for Angular</h3>
<p>Our goal is to build a set of high-quality UI components built with
Angular and TypeScript, following the Material Design spec. These
components will serve as an example of how to write Angular code
following best practices.</p>
<p><img src="images/material.png" /></p>
<h3 id="ant-design---a-ui-design-language"><a
href="https://github.com/ant-design/ant-design">ant-design</a> - A UI
Design Language</h3>
<p>An enterprise-class UI design language and React-based
implementation.</p>
<p><img src="images/antdesign/case.png" /></p>
<h3 id="ant-design-mobile---a-configurable-mobile-ui"><a
href="https://github.com/ant-design/ant-design-mobile">ant-design-mobile</a>
- A configurable Mobile UI</h3>
<p>A configurable Mobile UI specification and React-based
implementation.</p>
<p><img src="images/antdesign/mobilecase.png" /></p>
<h3 id="blueprint---a-react-based-ui-toolkit-for-the-web"><a
href="https://github.com/palantir/blueprint">blueprint</a> - A
React-based UI toolkit for the web</h3>
<p>It is optimized for building complex, data-dense web interfaces for
desktop applications. If you rely heavily on mobile interactions and are
looking for a mobile-first UI toolkit, this may not be for you.</p>
<p><img src="images/blueprintjs/ui.png" /></p>
<h3
id="plottable---a-library-of-modular-chart-components-built-on-d3"><a
href="https://github.com/palantir/plottable">plottable</a> - A library
of modular chart components built on D3</h3>
<p>It’s easier to quickly build charts than with D3, and the charts are
much more flexible than standard-template charts provided by charting
libraries.</p>
<p><img src="images/plottablejs/charts.png" /></p>
<h3 id="ng2-bootstrap---native-angular-directives-for-bootstrap"><a
href="https://github.com/valor-software/ng2-bootstrap">ng2-bootstrap</a>
- Native Angular directives for Bootstrap</h3>
<p>ng2-bootstrap contains all core (and not only) Bootstrap components
powered by Angular 2. So you don’t need to include original JS
components, but we are using markup and css provided by Bootstrap.</p>
<p><img src="images/ng2-bootstrap.png" /></p>
<h3 id="ng2-charts---beautiful-charts-for-angular2-based-on-chart.js"><a
href="https://github.com/valor-software/ng2-charts">ng2-charts</a> -
Beautiful charts for Angular2 based on Chart.js</h3>
<p>There are one directive for all chart types: base-chart, and there
are 6 types of charts: , line, bar, radar, pie, polarArea, doughnut.</p>
<p><img src="images/ng2-charts.png" /></p>
<h3 id="ng2-handsontable---angular-2-directive-for-handsontable"><a
href="https://github.com/valor-software/ng2-handsontable">ng2-handsontable</a>
- Angular 2 directive for Handsontable</h3>
<p>Handsontable is a data grid component with an Excel-like appearance.
Built in JavaScript, it integrates with any data source and comes with
features like data validation, sorting, grouping, data binding or column
ordering.</p>
<p><img src="images/handsontable.png" /></p>
<h3
id="ng2-table---simple-table-extension-with-sorting-filtering-paging-for-angular2-apps"><a
href="https://github.com/valor-software/ng2-table">ng2-table</a> -
Simple table extension with sorting, filtering, paging… for Angular2
apps</h3>
<p><a href="http://valor-software.com/ng2-table/">Demo Page</a></p>
<p><img src="images/ng2-table.png" /></p>
<h3
id="ng2-tree---angular-tree-component.-version-2.0.0-is-still-an-alpha"><a
href="https://github.com/valor-software/ng2-tree">ng2-tree</a> - Angular
tree component. VERSION 2.0.0 is still an ALPHA!</h3>
<p><a href="http://valor-software.com/ng2-tree/">Demo Page</a></p>
<p><img src="images/ng2-tree.png" /></p>
<h3 id="ng2-select---angular2-based-replacement-for-select-boxes"><a
href="https://github.com/valor-software/ng2-select">ng2-select</a> -
Angular2 based replacement for select boxes</h3>
<p><a href="http://valor-software.com/ng2-select/">Demo Page</a></p>
<p><img src="images/ng2-select.png" /></p>
<h3 id="primeng---ui-components-for-angular-2"><a
href="https://github.com/primefaces/primeng">primeng</a> - UI Components
for Angular 2</h3>
<p>It’s easier to quickly build charts than with D3, and the charts are
much more flexible than standard-template charts provided by charting
libraries.</p>
<p><img
src="http://www.primefaces.org/primeng/showcase/resources/images/bootstrap.png" /></p>
<h3 id="line-chart---awesome-charts-for-angularjs"><a
href="https://github.com/n3-charts/line-chart">line-chart</a> - Awesome
charts for AngularJS</h3>
<p>n3-line-chart is an easy-to-use JavaScript library for creating
beautiful charts in AngularJS applications and it is built on top of
D3.js.</p>
<p><img
src="https://cloud.githubusercontent.com/assets/2969388/12079874/36579ec8-b249-11e5-8c7f-ee3f724ff886.png" /></p>
<h3 id="pie-chart---yummy-pies-and-donuts-for-angularjs"><a
href="https://github.com/n3-charts/pie-chart">pie-chart</a> - Yummy pies
and donuts for AngularJS</h3>
<p>Yummy pies and donuts for AngularJS applications. Built on top of the
wonderful D3.js library.</p>
<p><img src="images/pie-chart.png" /></p>
<h3
id="trnggrid---a-feature-rich-angular-grid-using-standard-html-tables."><a
href="https://github.com/MoonStorm/trNgGrid">trNgGrid</a> - A feature
rich Angular grid using standard HTML tables.</h3>
<p>trNgGrid can be used for simple to mildly complex scenarios where you
quickly need a data grid with a decent amount of features, which is easy
to learn and to hook up with your data models thanks to its powerful
data binding properties. All the configuration parameters can be set
directly inside the view, hence you won’t muddy your Angular scopes or
controllers with configuration details.</p>
<p><img src="images/table.png" /></p>
<hr />
<h2 id="library">Library</h2>
<h3
id="ui-router---the-de-facto-solution-to-flexible-routing-with-nested-views-in-angularjs"><a
href="https://github.com/angular-ui/ui-router">ui-router</a> - The
de-facto solution to flexible routing with nested views in
AngularJS</h3>
<p>UI-Router applications are modeled as a hierarchical tree of states.
UI-Router provides a state machine to manage the transitions between
those application states in a transaction-like manner.</p>
<p><img src="images/ui-router.png" /></p>
<h3 id="mobx---simple-scalable-state-management."><a
href="https://github.com/mobxjs/mobx">mobx</a> - Simple, scalable state
management.</h3>
<p>MobX is a battle tested library that makes state management simple
and scalable by transparently applying functional reactive programming
(TFRP). The philosophy behind MobX is very simple:</p>
<p><em>Anything that can be derived from the application state, should
be derived. Automatically.</em></p>
<p>which includes the UI, data serialization, server communication,
etc.</p>
<p><img
src="https://raw.githubusercontent.com/mobxjs/mobx/master/docs/flow.png" /></p>
<p>React and MobX together are a powerful combination. React renders the
application state by providing mechanisms to translate it into a tree of
renderable components. MobX provides the mechanism to store and update
the application state that React then uses.</p>
<p>Both React and MobX provide very optimal and unique solutions to
common problems in application development. React provides mechanisms to
optimally render UI by using a virtual DOM that reduces the number of
costly DOM mutations. MobX provides mechanisms to optimally synchronize
application state with your React components by using a reactive virtual
dependency state graph that is only updated when strictly needed and is
never stale.</p>
<h3
id="stryker---the-extendable-javascript-mutation-testing-framework."><a
href="https://github.com/stryker-mutator/stryker">stryker</a> - The
extendable JavaScript mutation testing framework.</h3>
<p>Professor X: For someone who hates mutants… you certainly keep some
strange company. William Stryker: Oh, they serve their purpose… as long
as they can be controlled.</p>
<p><img src="images/stryker/case.png" /></p>
<h3
id="typeorm---data-mapper-orm-for-typescript-and-javascript-es7-es6-es5.-supports-mysql-postgresql-mariadb-sqlite-ms-sql-server-oracle-websql-databases.-works-in-node.js-and-browser."><a
href="https://github.com/typeorm/typeorm">typeorm</a> - Data-Mapper ORM
for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL,
PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, WebSQL databases.
Works in Node.js and Browser.</h3>
<p>TypeORM is an Object Relational Mapper (ORM) for node.js written in
TypeScript that can be used with TypeScript or JavaScript (ES5, ES6,
ES7). Its goal to always support latest JavaScript features and provide
features that help you to develop any kind of applications that use
database - from small applications with a few tables to large scale
enterprise applications.</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode ts"><code class="sourceCode typescript"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> {Entity<span class="op">,</span> Column<span class="op">,</span> PrimaryGeneratedColumn<span class="op">,</span> OneToOne<span class="op">,</span> JoinColumn} <span class="im">from</span> <span class="st">&quot;typeorm&quot;</span><span class="op">;</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> {Photo} <span class="im">from</span> <span class="st">&quot;./Photo&quot;</span><span class="op">;</span></span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a>@<span class="fu">Entity</span>()</span>
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a><span class="im">export</span> <span class="kw">class</span> PhotoMetadata {</span>
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a>    @<span class="fu">PrimaryGeneratedColumn</span>()</span>
<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a>    id<span class="op">:</span> <span class="dt">number</span><span class="op">;</span></span>
<span id="cb2-9"><a href="#cb2-9" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-10"><a href="#cb2-10" aria-hidden="true" tabindex="-1"></a>    @<span class="fu">Column</span>(<span class="st">&quot;int&quot;</span>)</span>
<span id="cb2-11"><a href="#cb2-11" aria-hidden="true" tabindex="-1"></a>    height<span class="op">:</span> <span class="dt">number</span><span class="op">;</span></span>
<span id="cb2-12"><a href="#cb2-12" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-13"><a href="#cb2-13" aria-hidden="true" tabindex="-1"></a>    @<span class="fu">Column</span>(<span class="st">&quot;int&quot;</span>)</span>
<span id="cb2-14"><a href="#cb2-14" aria-hidden="true" tabindex="-1"></a>    width<span class="op">:</span> <span class="dt">number</span><span class="op">;</span></span>
<span id="cb2-15"><a href="#cb2-15" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-16"><a href="#cb2-16" aria-hidden="true" tabindex="-1"></a>    @<span class="fu">Column</span>()</span>
<span id="cb2-17"><a href="#cb2-17" aria-hidden="true" tabindex="-1"></a>    orientation<span class="op">:</span> <span class="dt">string</span><span class="op">;</span></span>
<span id="cb2-18"><a href="#cb2-18" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-19"><a href="#cb2-19" aria-hidden="true" tabindex="-1"></a>    @<span class="fu">Column</span>()</span>
<span id="cb2-20"><a href="#cb2-20" aria-hidden="true" tabindex="-1"></a>    compressed<span class="op">:</span> <span class="dt">boolean</span><span class="op">;</span></span>
<span id="cb2-21"><a href="#cb2-21" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-22"><a href="#cb2-22" aria-hidden="true" tabindex="-1"></a>    @<span class="fu">Column</span>()</span>
<span id="cb2-23"><a href="#cb2-23" aria-hidden="true" tabindex="-1"></a>    comment<span class="op">:</span> <span class="dt">string</span><span class="op">;</span></span>
<span id="cb2-24"><a href="#cb2-24" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-25"><a href="#cb2-25" aria-hidden="true" tabindex="-1"></a>    @<span class="fu">OneToOne</span>(<span class="kw">type</span> <span class="kw">=&gt;</span> Photo)</span>
<span id="cb2-26"><a href="#cb2-26" aria-hidden="true" tabindex="-1"></a>    @<span class="fu">JoinColumn</span>()</span>
<span id="cb2-27"><a href="#cb2-27" aria-hidden="true" tabindex="-1"></a>    photo<span class="op">:</span> Photo<span class="op">;</span></span>
<span id="cb2-28"><a href="#cb2-28" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<h3
id="reflect-metadata---prototype-for-a-metadata-reflection-api-for-ecmascript"><a
href="https://github.com/rbuckton/reflect-metadata">reflect-metadata</a>
- Prototype for a Metadata Reflection API for ECMAScript</h3>
<p>Proposal to add Decorators to ES7, along with a prototype for an ES7
Reflection API for Decorator Metadata.</p>
<h3
id="apollo-client---a-fully-featured-production-ready-caching-graphql-client-for-every-server-or-ui-framework"><a
href="https://github.com/apollographql/apollo-client">apollo-client</a>
- A fully-featured, production ready caching GraphQL client for every
server or UI framework</h3>
<p>Apollo Client is a fully-featured caching GraphQL client with
integrations for React, Angular, and more. It allows you to easily build
UI components that fetch data via GraphQL. To get the most value out of
apollo-client, you should use it with one of its view layer
integrations.</p>
<h3
id="postgraphql---a-graphql-api-created-by-reflection-over-a-postgresql-schema."><a
href="https://github.com/calebmer/postgraphql">postgraphql</a> - A
GraphQL API created by reflection over a PostgreSQL schema.</h3>
<p>With PostGraphQL, you can access the power of PostgreSQL through a
well designed GraphQL server. PostGraphQL uses PostgreSQL reflection
APIs to automatically detect primary keys, relationships, types,
comments, and more providing a GraphQL server that is highly intelligent
about your data.</p>
<h3 id="inversifyjs---an-isomorphic-dependency-injection-library."><a
href="https://github.com/inversify/InversifyJS">InversifyJS</a> - An
isomorphic dependency injection library.</h3>
<p>InversifyJS is an inversion of control library that works in both
front-end and back-end applications. InversifyJS is framework agnostic
and can be integrated with many existing frameworks like React
applications powered by MobX or Node.js applications powered by
express.</p>
<p>InversifyJS is particularly well integrated with Express thanks to
the <a
href="https://github.com/inversify/inversify-express-utils">inversify-express-utils</a>
project:</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode ts"><code class="sourceCode typescript"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> <span class="op">*</span> <span class="im">as</span> express <span class="im">from</span> <span class="st">&quot;express&quot;</span><span class="op">;</span></span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { Response<span class="op">,</span> RequestParams<span class="op">,</span> Controller<span class="op">,</span> Get<span class="op">,</span> Post<span class="op">,</span> Put } <span class="im">from</span> <span class="st">&quot;inversify-express-utils&quot;</span><span class="op">;</span></span>
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { injectable<span class="op">,</span> inject } <span class="im">from</span> <span class="st">&quot;inversify&quot;</span><span class="op">;</span></span>
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { interfaces } <span class="im">from</span> <span class="st">&quot;./interfaces&quot;</span><span class="op">;</span></span>
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { Type } <span class="im">from</span> <span class="st">&quot;./types&quot;</span><span class="op">;</span></span>
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a>@<span class="fu">injectable</span>()</span>
<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a>@<span class="fu">Controller</span>(<span class="st">&quot;/api/user&quot;</span>)</span>
<span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a><span class="kw">class</span> UserController {</span>
<span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-11"><a href="#cb3-11" aria-hidden="true" tabindex="-1"></a>    @<span class="fu">inject</span>(Type<span class="op">.</span><span class="at">UserRepository</span>) <span class="kw">private</span> <span class="kw">readonly</span> _userRepository<span class="op">:</span> interfaces<span class="op">.</span><span class="at">UserRepository</span><span class="op">,</span></span>
<span id="cb3-12"><a href="#cb3-12" aria-hidden="true" tabindex="-1"></a>    @<span class="fu">inject</span>(Type<span class="op">.</span><span class="at">Logger</span>) <span class="kw">private</span> <span class="kw">readonly</span> _logger<span class="op">:</span> interfaces<span class="op">.</span><span class="at">Logger</span></span>
<span id="cb3-13"><a href="#cb3-13" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-14"><a href="#cb3-14" aria-hidden="true" tabindex="-1"></a>    @<span class="fu">Get</span>(<span class="st">&quot;/&quot;</span>)</span>
<span id="cb3-15"><a href="#cb3-15" aria-hidden="true" tabindex="-1"></a>    <span class="kw">public</span> <span class="kw">async</span> <span class="kw">get</span>(</span>
<span id="cb3-16"><a href="#cb3-16" aria-hidden="true" tabindex="-1"></a>      @<span class="fu">Request</span>() req<span class="op">:</span> express<span class="op">.</span><span class="at">Request</span><span class="op">,</span></span>
<span id="cb3-17"><a href="#cb3-17" aria-hidden="true" tabindex="-1"></a>      @<span class="fu">Response</span>() res<span class="op">:</span> express<span class="op">.</span><span class="at">Response</span></span>
<span id="cb3-18"><a href="#cb3-18" aria-hidden="true" tabindex="-1"></a>    ) {</span>
<span id="cb3-19"><a href="#cb3-19" aria-hidden="true" tabindex="-1"></a>        <span class="cf">try</span> {</span>
<span id="cb3-20"><a href="#cb3-20" aria-hidden="true" tabindex="-1"></a>            <span class="kw">this</span><span class="op">.</span><span class="at">_logger</span><span class="op">.</span><span class="fu">info</span>(<span class="vs">`HTTP </span><span class="sc">${</span>req<span class="op">.</span><span class="at">method</span><span class="sc">}</span><span class="vs"> </span><span class="sc">${</span>req<span class="op">.</span><span class="at">url</span><span class="sc">}</span><span class="vs">`</span>)<span class="op">;</span></span>
<span id="cb3-21"><a href="#cb3-21" aria-hidden="true" tabindex="-1"></a>            <span class="cf">return</span> <span class="cf">await</span> <span class="kw">this</span><span class="op">.</span><span class="at">_userRepository</span><span class="op">.</span><span class="fu">readAll</span>()<span class="op">;</span></span>
<span id="cb3-22"><a href="#cb3-22" aria-hidden="true" tabindex="-1"></a>        } <span class="cf">catch</span> (e) {</span>
<span id="cb3-23"><a href="#cb3-23" aria-hidden="true" tabindex="-1"></a>            <span class="kw">this</span><span class="op">.</span><span class="at">_logger</span><span class="op">.</span><span class="fu">error</span>(<span class="vs">`HTTP ERROR </span><span class="sc">${</span>req<span class="op">.</span><span class="at">method</span><span class="sc">}</span><span class="vs"> </span><span class="sc">${</span>req<span class="op">.</span><span class="at">url</span><span class="sc">}</span><span class="vs">`</span><span class="op">,</span> e)<span class="op">;</span></span>
<span id="cb3-24"><a href="#cb3-24" aria-hidden="true" tabindex="-1"></a>            res<span class="op">.</span><span class="fu">status</span>(<span class="dv">500</span>)<span class="op">.</span><span class="fu">json</span>([])<span class="op">;</span></span>
<span id="cb3-25"><a href="#cb3-25" aria-hidden="true" tabindex="-1"></a>        }</span>
<span id="cb3-26"><a href="#cb3-26" aria-hidden="true" tabindex="-1"></a>    }</span>
<span id="cb3-27"><a href="#cb3-27" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-28"><a href="#cb3-28" aria-hidden="true" tabindex="-1"></a>    @<span class="fu">Get</span>(<span class="st">&quot;/:email&quot;</span>)</span>
<span id="cb3-29"><a href="#cb3-29" aria-hidden="true" tabindex="-1"></a>    <span class="kw">public</span> <span class="kw">async</span> <span class="fu">getByEmail</span>(</span>
<span id="cb3-30"><a href="#cb3-30" aria-hidden="true" tabindex="-1"></a>      @<span class="fu">RequestParams</span>(<span class="st">&quot;email&quot;</span>) email<span class="op">:</span> <span class="dt">string</span><span class="op">,</span></span>
<span id="cb3-31"><a href="#cb3-31" aria-hidden="true" tabindex="-1"></a>      @<span class="fu">Request</span>() req<span class="op">:</span> express<span class="op">.</span><span class="at">Request</span><span class="op">,</span></span>
<span id="cb3-32"><a href="#cb3-32" aria-hidden="true" tabindex="-1"></a>      @<span class="fu">Response</span>() res<span class="op">:</span> express<span class="op">.</span><span class="at">Response</span></span>
<span id="cb3-33"><a href="#cb3-33" aria-hidden="true" tabindex="-1"></a>    ) {</span>
<span id="cb3-34"><a href="#cb3-34" aria-hidden="true" tabindex="-1"></a>        <span class="cf">try</span> {</span>
<span id="cb3-35"><a href="#cb3-35" aria-hidden="true" tabindex="-1"></a>            <span class="kw">this</span><span class="op">.</span><span class="at">_logger</span><span class="op">.</span><span class="fu">info</span>(<span class="vs">`HTTP </span><span class="sc">${</span>req<span class="op">.</span><span class="at">method</span><span class="sc">}</span><span class="vs"> </span><span class="sc">${</span>req<span class="op">.</span><span class="at">url</span><span class="sc">}</span><span class="vs">`</span>)<span class="op">;</span></span>
<span id="cb3-36"><a href="#cb3-36" aria-hidden="true" tabindex="-1"></a>            <span class="cf">return</span> <span class="cf">await</span> <span class="kw">this</span><span class="op">.</span><span class="at">_userRepository</span><span class="op">.</span><span class="fu">readAll</span>({ where<span class="op">:</span> { email<span class="op">:</span> email } })<span class="op">;</span></span>
<span id="cb3-37"><a href="#cb3-37" aria-hidden="true" tabindex="-1"></a>        } <span class="cf">catch</span> (e) {</span>
<span id="cb3-38"><a href="#cb3-38" aria-hidden="true" tabindex="-1"></a>            <span class="kw">this</span><span class="op">.</span><span class="at">_logger</span><span class="op">.</span><span class="fu">error</span>(<span class="vs">`HTTP ERROR </span><span class="sc">${</span>req<span class="op">.</span><span class="at">method</span><span class="sc">}</span><span class="vs"> </span><span class="sc">${</span>req<span class="op">.</span><span class="at">url</span><span class="sc">}</span><span class="vs">`</span><span class="op">,</span> e)<span class="op">;</span></span>
<span id="cb3-39"><a href="#cb3-39" aria-hidden="true" tabindex="-1"></a>            res<span class="op">.</span><span class="fu">status</span>(<span class="dv">500</span>)<span class="op">.</span><span class="fu">json</span>([])<span class="op">;</span></span>
<span id="cb3-40"><a href="#cb3-40" aria-hidden="true" tabindex="-1"></a>        }</span>
<span id="cb3-41"><a href="#cb3-41" aria-hidden="true" tabindex="-1"></a>    }</span>
<span id="cb3-42"><a href="#cb3-42" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-43"><a href="#cb3-43" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<p>The <a href="https://github.com/inversify">Inversify GitHub
organization</a> also provides the community with some helpers and
examples to facilitate the integration of InversifyJS with other popular
projects.</p>
<h3
id="create-react-app-typescript---create-react-apps-using-typescript-with-no-build-configuration."><a
href="https://github.com/wmonk/create-react-app-typescript">create-react-app-typescript</a>
- Create React apps using typescript with no build configuration.</h3>
<p>Create React apps (with Typescript) with no build configuration.</p>
<p>Do you know react and want to try out typescript? Or do you know
typescript and want to try out react? Get all the benefits from
create-react-app but you use typescript!</p>
<h3
id="reactxp---reactxp-is-a-library-for-cross-platform-app-development-using-react-and-react-native."><a
href="https://github.com/microsoft/reactxp">ReactXP</a> - ReactXP is a
library for cross-platform app development using React and React
Native.</h3>
<p>With React and React Native, your web app can share most its logic
with your iOS and Android apps, but the view layer needs to be
implemented separately for each platform. We have taken this a step
further and developed a thin cross-platform layer we call ReactXP. If
you write your app to this abstraction, you can share your view
definitions, styles and animations across multiple target platforms. Of
course, you can still provide platform-specific UI variants, but this
can be done selectively where desired.</p>
<h3
id="json-schema-to-typescript---compile-jsonschema-to-typescript-typings."><a
href="https://github.com/bcherny/json-schema-to-typescript">json-schema-to-typescript</a>
- Compile JSONSchema to TypeScript typings.</h3>
<h3
id="deeplearnjs---hardware-accelerated-deep-learning-and-linear-algebra-numpy-library-for-the-web."><a
href="https://github.com/PAIR-code/deeplearnjs">deeplearnjs</a> -
Hardware-accelerated deep learning and linear algebra (NumPy) library
for the web.</h3>
<p>deeplearn.js is an open source hardware-accelerated JavaScript
library for machine intelligence. deeplearn.js brings performant machine
learning building blocks to the web, allowing you to train neural
networks in a browser or run pre-trained models in inference mode.</p>
<p>We provide two APIs, an immediate execution model (think NumPy) and a
deferred execution model mirroring the TensorFlow API. deeplearn.js was
originally developed by the Google Brain PAIR team to build powerful
interactive machine learning tools for the browser, but it can be used
for everything from education, to model understanding, to art
projects.</p>
<h3
id="intern---a-next-generation-code-testing-stack-for-javascript."><a
href="https://github.com/theintern/intern">intern</a> - A
next-generation code testing stack for JavaScript.</h3>
<p>Intern is a complete test system for JavaScript designed to help you
write and run consistent, high-quality test cases for your JavaScript
libraries and applications. It can be used to test any JavaScript
code.</p>
<p>Plain JavaScript code, in any module format (or no module format!)
Web pages generated by server-side languages (like Java, PHP, or Ruby)
Native or hybrid iOS, Android, and Firefox OS applications Intern is
minimally prescriptive and enforces only a basic set of best practices
designed to ensure your tests stay maintainable over time. Its
extensible architecture allows you to write custom test interfaces,
executors, and reporters to influence how your tests run &amp; easily
integrate with your existing coding environment. Intern also comes with
Grunt tasks so it can be quickly added to existing Grunt-based
workflows, and is designed to work out-of-the-box with popular
continuous integration services like Jenkins and Travis CI.</p>
<h3
id="typedi---simple-yet-powerful-dependency-injection-tool-for-typescript."><a
href="https://github.com/typestack/typedi">TypeDI</a> - Simple yet
powerful dependency injection tool for TypeScript.</h3>
<p>TypeDI is a dependency injection tool for TypeScript. Using TypeDI
you can build well-structured and easily tested applications.</p>
<h3 id="react-apollo---react-integration-for-apollo-client."><a
href="https://github.com/apollographql/react-apollo">react-apollo</a> -
React integration for Apollo Client.</h3>
<p>TypeDI is a dependency injection tool for TypeScript. Using TypeDI
you can build well-structured and easily tested applications.</p>
<p>React Apollo allows you to fetch data from your GraphQL server and
use it in building complex and reactive UIs using the React framework.
React Apollo may be used in any context that React may be used. In the
browser, in React Native, or in Node.js when you want to do server-side
rendering.</p>
<p>React Apollo unlike many other tools in the React ecosystem requires
no complex build setup to get up and running. As long as you have a
GraphQL server you can get started building out your application with
React immediately. React Apollo works out of the box with both
create-react-app and React Native with a single install and with no
extra hassle configuring Babel or other JavaScript tools.</p>
<hr />
<h2 id="application">Application</h2>
<h3
id="hitchhiker---hitchhiker-api-is-a-restful-api-integrated-testing-tool-that-support-schedule-response-comparsion-stress-test-etc.-you-can-deploy-it-in-your-local-server.-it-make-easier-to-manage-api-with-your-team."><a
href="https://github.com/brookshi/Hitchhiker">Hitchhiker</a> -
Hitchhiker Api is a Restful Api integrated testing tool that support
Schedule, Response comparsion, Stress Test etc. You can deploy it in
your local server. It make easier to manage Api with your team.</h3>
<ul>
<li>Api collaboration development with team</li>
<li>Api history</li>
<li>Multiple environments and Runtime variables support, easy to handle
api dependence</li>
<li>Request parameterization, include ManytoMany and OnetoOne, now you
can use a request to handle multple situation like various query string,
body</li>
<li>Schedule and run batch</li>
<li>Make a comparison for Api response between two different
environments (eg: stage vs product)</li>
<li>Support Handling response before comparing</li>
<li>Easy to deploy (support docker, windows, linux), keep data in your
control, never lose data</li>
<li>All changed will be auto saved in local cache even if refresh
page</li>
<li>Support importing Postman v1 collections</li>
<li>Distributed stress test</li>
<li>Api Document (in future)</li>
</ul>
<p><img
src="https://raw.githubusercontent.com/brookshi/images/master/Hitchhiker/stresstest.gif" /></p>
<h3
id="upterm---upterm-formerly-black-screen-is-an-ide-in-the-world-of-terminals.-strictly-speaking-its-both-a-terminal-emulator-and-an-interactive-shell-based-on-electron."><a
href="https://github.com/railsware/upterm">upterm</a> - Upterm (formerly
Black Screen) is an IDE in the world of terminals. Strictly speaking,
it’s both a terminal emulator and an interactive shell based on
Electron.</h3>
<ol type="1">
<li><p>Autocompletion Upterm shows the autocompletion box as you type
and tries to be smart about what to suggest. Often you can find useful
additional information on the right side of the autocompletion,
e.g. expanded alias value, command descriptions, value of the previous
directory (cd -), etc.</p></li>
<li><p>Compatibility All command-line programs (including emacs, ssh and
vim) should work as expected.</p></li>
</ol>
<p><img
src="https://github.com/railsware/upterm/raw/master/README/npm_autocompletion.png" /></p>
<h3 id="desktop---simple-collaboration-from-your-desktop."><a
href="https://github.com/desktop/desktop">desktop</a> - Simple
collaboration from your desktop.</h3>
<p>GitHub Desktop is an open source Electron-based GitHub app. It is
written in TypeScript and uses React.</p>
<p><img
src="https://cloud.githubusercontent.com/assets/359239/26094502/a1f56d02-3a5d-11e7-8799-23c7ba5e5106.png" /></p>
<h3 id="terminus---a-terminal-for-a-more-modern-age."><a
href="https://github.com/Eugeny/terminus">terminus</a> - A terminal for
a more modern age.</h3>
<p>Terminus is a web technology based terminal heavily inspired by
Hyper. It is, however, designed for people who need to get things
done.</p>
<p>Runs on Windows, macOS and Linux Theming and color schemes
Configurable hotkey schemes GNU Screen style hotkeys available by
default Full Unicode support including double-width characters Doesn’t
choke on fast-flowing outputs Tab persistence on macOS and Linux Proper
shell-like experience on Windows including tab completion (thanks,
Clink!) CMD, PowerShell, Cygwin, Git-Bash and Bash on Windows support
Default Linux style hotkeys for copy (Ctrl+Shift+C) and paste
(Ctrl+Shift+V)</p>
<p><img
src="https://github.com/Eugeny/terminus/raw/master/docs/linux.png" /></p>
<h3
id="windows-build-tools---install-c-build-tools-for-windows-using-npm."><a
href="https://github.com/felixrieseberg/windows-build-tools">windows-build-tools</a>
- Install C++ Build Tools for Windows using npm.</h3>
<p><img
src="https://user-images.githubusercontent.com/1426799/36077410-66a1d122-0f1f-11e8-9730-3ca50af1e4e6.gif" /></p>
<h3 id="rendertron---a-headless-chrome-rendering-solution."><a
href="https://github.com/GoogleChrome/rendertron">rendertron</a> - A
Headless Chrome rendering solution.</h3>
<p>Rendertron is designed to enable your Progressive Web App (PWA) to
serve the correct content to any bot that doesn’t render or execute
JavaScript. Rendertron runs as a standalone HTTP server. Rendertron
renders requested pages using Headless Chrome, auto-detecting when your
PWA has completed loading and serializes the response back to the
original request. To use Rendertron, your application configures
middleware to determine whether to proxy a request to Rendertron.
Rendertron is compatible with all client side technologies, including
web components.</p>
<p><a
href="https://github.com/brookshi/awesome-typescript-projects">typescriptprojects.md
Github</a></p>