- Crockford's style guide integrates with JSLint, which in turn is available as a plugin for Eclipse.
All these frameworks have a command line utility to generate an application skeleton which includes the serve, build and test functionality.
To create a Angular application use Angular CLI.
React is a library which can used to create interactive User Interfaces by combining components. It is developed by Facebook. Where Angular and Vue.js are frameworks, including all the rendering, routing, state management functonality inside them. React only does rendering so other libraries must be used for routing and state management. Redux can be used to let state changes flow through React components. React Router can be used to navigate the application using URLs.
To create a React application use the Create React App How to develop the bootstrapped app further is described in the README.md.
TypeScript React Starter is a Typescript version of create react app.
To create a Vue.js application use Vue CLI.
TypeScript Vue Starter is a guide to write Vue applications in TypeScript.
On Ubuntu (18.04) based systems, you can use the following commands to install NodeJS:
# system packages (Ubuntu/Debian) curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs
Editors and IDEs
In web development, debugging is typically done in the browser.
- The best debugging tool suite is currently the debugger built into the Google Chrome webbrowser, and its open-source counterpart, Chromium. It can watch variables, step through the code, lets you monitor network traffic, and much more. Activate the debugger through the F12 key.
- On Firefox, use either the built-in debugging functionality (again accessible through the F12 button) or install the Firebug Addon for some more advanced debugging functionality.
- Microsoft has a debugging toolset called 'F12' for their Internet Explorer and Edge browsers. It offers similar capability as that of Google Chrome, Chromium, and Firefox.
- In Safari on OS X, press ⌘⌥U.
Hosting data files
python3 -m http.server 8000
Then open the webbrowser to http://localhost:8000.
- Karma, Test runner, runs tests in web browser with code coverage. Use PhantomJS as headless webbrowser on CI-servers.
- Tape, a minimal testing framework that helps remove some of the black-box approach of some of the other frameworks.
- Jest, a test framework from Facebook which is integrated into the Create React App
Web based tests
To interact with web-browsers use Selenium.
- Local web browser
- Web browsers hosted by Sauce Labs, it has a matrix of web-browsers and Operating Systems. Free for open source projects.
Use a linter like eslint to detect errors and potential problems.
Showing code examples
Code quality analysis tools and services
To learn about TypeScript the following resources are available:
- youtube: tutorials playlist about TypeScript
- tutorial from Microsoft's TypeScript website
- blog post that supposedly is the definitive guide to TypeScript
- TypeScript Language Specification
To install TypeScript compiler run:
npm install -g typescript
Dealing with Types
In TypeScript, variables are typed and these types are checked.
This implies that when using libraries, the types of these libraries need to be installed.
More and more libraries ship with type declarations in them so they can be used directly. These libraries will have a "typings" key in their package.json.
When a library does not ship with type declarations then the libriaries
@types/<library-name> package must be installed using npm:
npm install --save-dev @types/<library-name>
For example say we want to use the
react package which we installed using
npm install react --save
To be able to use its functionality in TypeScript we need to install the typings. We can search for the correct package at http://microsoft.github.io/TypeSearch/ .
And install it with:
npm install --save-dev @types/react
--save-dev flag saves this installation to the package.json file as a development dependency.
Do not use
Editors and IDEs
These are some good TypeScript editors:
- Atom by GitHub, with the
- Brackets by Adobe
- Visual Studio Code by Microsoft
- WebStorm by JetBeans
The best TypeScript editors is currently Visual Studio Code as Microsoft develops both the editor and Typescript.
TSLint is a good tool to check your codestyle.