On the 14th of November 2015, CodeHub organised another JavaScript workshop, after one that took place a year ago, and one from 2013 which had been organised by BristolJS. This is a summary of the talks.

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

From mobile, we moved to hardware. Danielle Vass is an Android Developer, but also teaches children and students to code, mostly using JavaScript; in combination with SVG, or electronics. For this workshop she used the CloudBit from the LittleBits electronic components library. The Cloudbits can connect to a web APi. As a first simple exercise we controlled the bits from the web: by pressing a button in the browser, we made the Cloudbit light up. Another example was getting wheather data through YQL(Yahoo query language) and post them to the Cloudbits. Danielle wrote a gist with instructions. And here are the slides for her presentation.

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.

ES6

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.

Many thanks to all the speakers. We are also grateful to our sponsors, Momentum and Moltin, who made this event possible.

References/Resources:

• 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/
   
  

By Katja
Posted in Categories: javascript node ionic es6 testing littlebits