TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.
TypeScript - typescriptlang.org
Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow.
Flux - facebook.github.io/flux
React is a Javascript library for building user interfaces. React uses a virtual DOM diff implementation for ultra-high performance.
React - facebook.github.io/react
The TypeScript website is a great resource for getting started.
Here are some links you may find helpful:
Articles and guides from the community:
- "Evolving JavaScript with TypeScript" by Anders Hejlsberg
- Thoughts on TypeScript
- ScreenCast - Why I Like TypeScript
Get help from other TypeScript users:
If you have other helpful links to share, or find any of the links above no longer work, please let us know.
This application is a port of the flux-todomvc example, which is part of Facebook's Flux project.
The original example uses JSX, which is a a JavaScript syntax extension that looks similar to XML. Transforming JSX to Javascript is pretty easy as James Brantly explained in his recent React.js Conf 2015 talk Static typing with Flow and TypeScript.
James Brantly's reactconf uses webpack and ts-jsx-loader. This project on the other hand uses grunt and grunt-text-replace with react-tools and grunt-browserify instead.
The main reason for choosing browserify over webpack is that browserify injects node.js polyfills like EventEmitter, which are used by the original flux-todomvc example.
During the build phase all *.tsx and *.ts are first being copied to a temporary ./build folder and then compiled to Javascript using the Typescript compiler.
A second pass then intelligently replaces React.jsx(...) with transformed JSX code. For more details see ./grunt/replace.js.
The build mechanics are all implemented in ./grunt/aliases.js. The output folder is ./web.
This project also supports minification using Google's Closure Compiler.
You must have node.js installed on your computer, which includes npm. From the root project directory run these commands from the command line:
npm install
That will install all dependencies and build web/js/bundle.js, which is used by web/index.html.
Once you've built the project you can open web/index.html in your browser, or simply run npm start.
Please try this live demo:
https://bparadie.github.io/fluxts-todomvc