Posted on: 13 December 2015
Test-driven development of Express applications using Mocha and Chai (or: How I learned to go fast)
In the first presentation, Bridget McErlean talked about what TDD is, best practices, and how writing tests can make you faster; and give you a sense of achievement, too - Check out the slides + speaker notes). Then she demonstrated how to write tests on an example Express app, using Mocha and Chai. The example is up on GitHub. After cloning the repository and running npm install, you can check out different tags. For each new test, there is one tag where the test fails, and one where it succeeds (git tag will show you the tags available). Also, check out the nyan branch, then run npm test ;)
Getting started with Ionic framework
Denis Sellu walked us through the setup of an Ionic app. Ionic is a framework built on top of Cordova and Angular. It has a range of pre-installed elements and directives, which let you create mobile apps with relative ease. Denis demonstrated how you can scaffold a sample app with one Ionic command, then serve the app for viewing in the browser (which is different from emulating the app of course). An alternative approach for scaffolding is using a tool like Yeoman. On the interface side, Ionic seems to use a lot of CSS3 techniques, like flexbox grids and CSS tranisitions for animation. Denis showed how you can create app-like interfaces with a few lines of code. To get started with Ionic, check out Denis’s blog post: http://cookieshq.co.uk/posts/getting-started-with-ionic/. There will be more posts to follow.
Hardware hacking with Littlebits
Transpiling in 2015 - Not as scary as you think
The remaining two talks concerned ES6 (or ES2015). ES6 offers a whole range of new syntax and constructs that add to, and change the language considerably. Nico Burns showed how you can use ES6 today, despite lack of full browser support. The most important ingredient is a transpiler like babel, which compiles ES6 into ES5. Nico showed a whole setup for development, using node, gulp and browserify, and of course babel. He went through some examples of ES5 code which he rewrote in ES6 to show the benefits. He also showed how you can use source maps to help with debugging the compiled code. Check out the setup and examples by cloning Nico’s git repository. After running npm install, look at the files in the src/ directory. When you run gulp build, these will be transformed into the files that you find in the dist/ directory.
While the previous talk was about how to transform ES6, the following and last one was about the features of the language. Jack Franklin had gone “meta” and built a whole app in ES6 which allows users to work through interactive examples of ES6. In this app, we could modify some code so as to make previously failing tests pass. You started by signing in with your name. Using the Pusher API, Jack could receive feedback (which was displayed on a ‘secret page’) on who was working on which section and whether they failed or passed. Jack used jspm which allows you to use any module format for your dependencies, and compiles ES6 to ES5. The web application is available here: http://bristol-js-es6.surge.sh and the corresponding repo here: https://github.com/jackfranklin/interactive-es6.
- Repository with links to resources for workshops, slides etc.: https://github.com/CodeHubOrg/JS-workshop-2015-resources
- Videos: https://www.youtube.com/playlist?list=PL_yQC45BEJ3VtbErqqaWAoJh6ibvpqBI4
- Meetup page: http://www.meetup.com/CodeHub-Bristol/events/225911661/