The Chronicles: Learning Web Development at Bitmaker Labs (Week 5)
Thoughts on software testing and diving into JavaScript & jQuery
Need some context? Check out last week’s post here, or start at week one here.
Monday
We covered a few more Rails testing essentials on Monday morning before spending the rest of the day working on our SeatYourself (clone of OpenTable) app.
Unit tests, functional tests, feature tests
There are three different types of testing in Rails:
- Unit tests, which test to ensure our models (data) are working and are associated correctly,
- Functional tests, which test our controllers and the methods inside them to make sure the small cogs in the large Rails machine are working correctly, and
- Feature tests, which do things like fill out forms and click submit or login buttons for us to make sure they’re working for the user.
Why testing is important
Writing software tests saves developers time in the development process — this seems like the most obvious reason to me why we would spend a bunch of time writing out tests to do check that models, controllers, and features are working correctly. It is tiresome and time-consuming to fill out every form on your site every time you change a bit of code, and tests can automate this. Testing is also important for checking functionality that is not visible to the user but could prevent a program (or the entire app from working). Finally, Rails has a built-in testing directory (ActiveSupport::Test Case which inherits from MiniTest, the Ruby testing language) to help us write tests, and we should do what Rails suggests because it is almost always right.
So, as tiresome as it might seem to some at first, testing is a pretty vital part of development and you should learn it early and practice it often.
Test-driven development
This is a fun concept whose name pretty much describes what it is. Test-driven development basically means writing a small test for each functionality and feature in your app, running that test (which will fail), building that functionality or feature, and running the test again (which will pass this time). I watched one of our instructors build out part of the SeatYourself app this way and it seems really tiresome and difficult… but I can understand why someone would build something this way. I just won’t be for a while.
Tuesday
We started learning about JavaScript on Tuesday, and covered a few basics before breaking out for the afternoon and practicing the fundamentals on our own. Our afternoon assignment was completing small exercises to get ourselves comfortable with some key concepts like variable assignment, arrays, if/else statements, for loops, functions, and objects.
Why use JavaScript?
Javascript is a lightweight interpreted programming language and is pretty much inescapable if you want to be a web developer. It’s also the main language that runs in your browser, so get to know it. Become its friend. It won’t bite… much.
A few things to remember
The purpose of today’s exercises were to get ourselves comfortable with JavaScript syntax, so here’s a few things to remember when writing JS:
- Semicolons EVERYWHERE after you’re finished an idea — except at the end of function definitions and if/else statements — or else the JS interpreter will add them for you and you’ll get weird bugs
- Always use “var” when creating a new variable (unless you want it to have the scope of all your JS code)
- We name functions, methods, variables, and objects in camel case, with a lowercase first letter (like this: myFirstFunction).
- Include your JavaScript link just before the end of your <body> tag or in between the <head> </head> tags in your HTML so that it is unobtrusive.
- There are five kinds of data types in JS: number (1, 2, 3, 4…) , string (“Oh HAI”, boolean (true or false), undefined (the absence of a value), and null (value that is explicitly not a value).
Wednesday
On Wednesday, we continued with Javascript fundamentals and familiarized ourselves with functions, variable scope, objects, “this” keyword selector, and worked on some exercises to practice these concepts. One of these exercises had us build a tiny program to print out the numbers 0–20 and add “is odd” or “is even” depending on whether a number could be evenly divided by two:
Thursday
We dove into the wonderful world of jQuery on Thursday, but not before getting to know the Document Object Model and manipulating it with ‘vanilla’ JavaScript — which is, as far as I understand it, the reason jQuery exists.
JQuery is a lightweight JavaScript library that basically makes developers’ lives easier by reducing the amount of steps and typing they have to do. For example, what we would write in vanilla JavaScript like this:
… could be written with jQuery like this:
Much better.
Our afternoon assignment had us running through short exercises to familiarize ourselves with the Document Object Model and jQuery with exercises like this, which had us use JavaScript to change the colour of the second rectangle:
Friday
We continued with jQuery on Friday and learned about closures and animations. Did you know that you can tell your computer to do this:
… and it does this?
I didn’t! But I’m so excited to put some of this to work next week. There is a lot to internalize this weekend.
Until week 6.
