In this talk, I'll start from a jQuery driven UI (grid with filtering) and move through steps to clean up the code. We'll look at OOP, inversion of control approaches, TypeScript, Jasmine (unit testing). Then we'll convert jQuery code into KnockoutJs to see how data-binding tools can help reduce DOM manipulations and simplify code. If there's time we'll touch on RequireJs (module loading) and show the same solution in Aurelia (a framework that does even more for us).
Using Data from https://api.datamarket.azure.com/UnitedNations/Energy/ with my free subscription key. I'm storing some in JSON files and then serving them from MVC.
I want to view the solar energy data available from United Nations So that I can have a more informed view of the world
I need code examples to show the progression of a ball of code into cleaner code
Given I load the page Then it should show the data in a table
Given I load the page Then it should default showing all data
Given the data table When I click on a row Then it should show the details
Given I select a different year option Then it should show the new data in the table
Show a loading indicator while loading data
Add in d.ts files from npm npm install --save @types/knockout
see package.JSON tsconfig.json file set to use es2015 modules for import -http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
in .gitignore add wwwroot/js/tsWithKo/.js and wwwroot/js/tsWithKo/.js.map to not check in generated files
running tsc -w in the command line for this project will compile TypeScript whenever you save a .ts change.
if targeting es6 it will only work with newer browsers http://kangax.github.io/compat-table/es6/
I'm using es6 for my module (see the tsconfig.json) https://www.typescriptlang.org/docs/handbook/modules.html http://www.2ality.com/2014/09/es6-modules-final.html import * as $ from "jquery";
http://caniuse.com/#search=promise - all but IE and Opera mini (Edge works)
Wanted to use: use fetch, es6 module, and es6 promises.
I don't recommend the tsWithKo module requireJs approach. Unless I changed it from require and didn't update this README.md
could be external, I'm just using the <script type="text/template"> https://awesomeopensource.com/project/rniemeyer/knockout-amd-helpers get the html file and place it in the DOm
computed : rowVmToShowDetailsFor with console.log to see when it computes
This was my oportunity to stop just reading about Aurelia to actually building something with it. src/aurelia/EnergyWebAurelia started from the http://aurelia.io https://awesomeopensource.com/project/aurelia/skeleton-navigation
Follow the README there for getting going jspm install npm install
gulp build (move from src to dist) or gulp watch
dotnet restore dotnet build should be enough to get it running on http://localhost:5000