Toolbox
The Toolbox is a collection of tools curated by the course staff for the programming assignments and group projects.
How to Read
First Read. Read the rest of this introduction and go through the list of tools following the instructions on the sections named Where Do I Get It?. If you have installed one of these tools in the past, you must update it.
Second Read. Read the sections named What Is It? and Why Did We Choose It?.
Third Read. Refer to TODOOSE for an example of the tools in action and follow the instructions in the sections named How Do I Learn It?. Don’t try to learn everything at once—it’s a lot of material.
Architecture: Web Application
The tools in the Toolbox form the foundation of a web application. This architecture is the most common for modern applications, and it illustrates good software-engineering principles, for example, separation of concerns, segregation of interfaces, and so forth. The two main components of a web application are the server and the client (which typically is a web browser). The tools in the Toolbox cover the whole stack, from end to end, including server and client.
Reasons to Reach for Tools that aren’t in the Toolbox
While you’re restricted to the tools in the Toolbox for the programming assignments, on your group project you’re free to reach for other tools. Here’s why you may want to do that:
The Project Needs it. This is probably the best reason. Say your project is about music, for example, then you probably need a library for processing sound, which you won’t find in the Toolbox. Also, you may decide to build something other than a web application, like a mobile application for iOS or Android, in which case you need something like React Native or Swift.
Fun. If you and your teammates are more experienced, it may be fun to reach for new and unusual tools. This is fine and good, as long as you’re willing to pay the price.
Profit. If you and your teammates already have a clear idea of the career path you want to take, you may benefit from having more experience with certain tools that aren’t in the Toolbox. This course is a great opportunity to build a real-world project using these tools to show to a potential employer in the future.
Reasons to Stick to the Tools in the Toolbox
Familiarity. You and your teammates already know the tools in the Toolbox from the programming assignments.
Cost. You must spend some time to learn a tool that isn’t in the Toolbox, and to make it work with the rest of the tools, and so forth.
You’re on your Own. We may not know how to help you if you get stuck.
No Extra Points. We evaluate projects based on their technical merits rather than on what tools they use.
Criteria for Curating the Tools
Minimalism. The fewer tools, the better.
Multiplatform. The tools must work on macOS, Linux, and Windows.
Beginner-Friendly. The tools must be relatively easy to install and to use, they must be well documented, and they must demonstrate good software-engineering principles.
Integration. The tools must work well together.
Industry Standard. The tools must not be only pedagogical toys, but actually be used in industry. For insight on this, refer to surveys like JetBrains’s State of Developer Ecosystem and Stack Overflow’s Developer Survey, and to other metrics such as the number of stars on GitHub, the number of downloads on the package manager, the number of answered questions on Stack Overflow, and so forth.
Tools in the Toolbox
Development Tools
Integrated Development Environment (IDE): IntelliJ IDEA
What Is It? An IDE allows you to edit source code, invoke the compiler, interact with the debugger, and so forth.
Why Did We Choose It? IntelliJ IDEA is the modern industry standard for Java, after it eclipsed the competition. It makes it easier to use the other tools in the Toolbox, including Git, JavaScript, Markdown, and SQLite. Also, it’s the foundation of Android Studio.
Where Do I Get It? Follow these instructions. Install the Ultimate edition, not the Community one. The Ultimate edition a commercial product, so apply for a student license. The Ultimate edition includes features that the Community doesn’t and that are useful in the course, for example, support for JavaScript and database tools.
How Do I Learn It? First, fiddle with it for a couple of hours. If after that you still want some help, refer to the documentation.
Application Programming Interface (API) Development Environment (ADE): Postman
What Is It? An API establishes what functionalities the server provides to the client and how it provides them. Once the API is designed, different people may work on the server and on the client independently, maybe even in parallel, and as long as both sides follow the API, the application will work in the end. An ADE helps you design the API, document it, test it, interact with it, and so forth.
Why Did We Choose It? Postman invented the idea of an ADE; it is the industry standard in this area and stands with little competition.
Where Do I Get It? Follow these instructions. You may have installed Postman as a browser extension in the past, but the browser extension has been discontinued, so switch to the standalone version.
How Do I Learn It? First, fiddle with it for a couple of hours. After doing that, visit the Postman Learning Center. In particular, read the sections about testing, which include the Postman Sandbox and its API Reference (this is the reference for Postman Sandbox’s API for testing, not to be confused with the application API which is the thing you design in Postman). Postman tests are written in JavaScript using the Chai library for expectations. To run Postman tests in the CI Server, invoke them from the command line with Newman.
Browser: Google Chrome
What Is It? I bet you know what a browser is, because you’re reading this in one right now. So what is this doing in the Toolbox? Well, typically a web application is expected to work in any browser, but in the interest of keeping things simple, we test your application in only one browser. This is a somewhat realistic constraint because modern browsers are becoming more alike.
Why Did We Choose It? Google Chrome is the most popular browser and it has some of the most advanced developer tools.
Where Do I Get It? Chances are that you’re already reading this in Google Chrome. If you aren’t, follow these instructions.
How Do I Learn It? Of course you already know how to use a web browser, but you must also learn how to use the developer tools, which include an HTML/CSS/JavaScript inspector, a network inspector, a JavaScript console, a JavaScript debugger, and much more.
Version Control System (VCS): Git
What Is It? A VCS is like a time machine for your code base: the VCS can save the state of the code base over time and help you navigate in its history. Also, a VCS lets you coordinate your work with other people on the same code base.
Why Did We Choose It? Git is the most used VCS and is also one of the most sophisticated.
Where Do I Get It? Follow these instructions to install Git. Then, to configure it:
-
Let Git know your name and email, which will be used to identify your contributions to the code base. Use an email that will belong to you forever, not, for example, your university email. You may use a different email from the one on your account on GitHub.
-
Create a global
.gitignore, which lists the kinds of files that Git should ignore. Typically these are files that would never belong to any project, but are generated by your operating system, text editor, and so forth, for example, the.DS_Storefiles generated by Finder on macOS. To get you started, GitHub provides some templates, for example, here is one for macOS.
How Do I Learn It? Use Git from within the IDE. For more advanced topics, or to learn about using Git from the command line, refer to Pro Git.
Project Management: GitHub
What Is It? A project management tool tracks what needs to be done in the project, who’s working on what, and so forth. It also hosts the canonical version of the code base.
Why Did We Choose It? GitHub is the most popular Git host. Its project-management tools are simple but cover everything you need for the group projects.
Where Do I Get It? Follow these instructions to create an account, and add to your account the SSH key you created when configuring Git.
How Do I Learn It? Go through the exercises in the GitHub Learning Lab and the GitHub Guides.
Wireframing & Diagramming: Paper & Pencil
What Is It? A wireframe is a rough sketch of the user interface. A diagram is a visual representation of the application’s technical design (not to be confused with its graphic design), for example, its classes and how they communicate.
Why Did We Choose It? Paper & Pencil helps to keep things simple. Wireframes should not be concerned with font choices, colors, and so forth. Diagrams should not include too many classes, attributes, methods, and so forth, particularly those that can be inferred from context, for example, getters and setters.
Where Do I Get It? I trust you can figure this one out by yourself.
How Do I Learn It? There is no set of rules on how to wireframe, but there is a common language that people tend to use. The kinds of diagrams in which we’re interested in this course, however, do follow a set of rules, the so-called Unified Modeling Language (UML). UML defines how certain elements, for example, classes and inheritance, should look on the page. UML defines many kinds of diagrams, but in this course we’re mainly interested in one: class diagrams.
Server
Programming Language: Java
What Is It? The programming language for the server side of your application.
Why Did We Choose It? Java is the quintessential modern object-oriented programming language, it is widely used in industry, and you probably already know it from previous courses.
Where Do I Get It? Follow these instructions. Install the latest Java Development Kit (JDK) for the Java Platform, Standard Edition (SE).
How Do I Learn It? Refer to an introductory Java book, for example, Core Java, if you want to brush up on the basics: syntax, classes, objects, inheritance, interfaces, exceptions, generics, polymorphism, method overloading and overriding, invoking the compiler, and so forth. Beyond the basics, learn about lambdas and local type inference.
Build System: Gradle
What Is It? A build system invokes the compiler for all the files in your project, it downloads and installs the third-party libraries in which your project depends, and so forth.
Why Did We Choose It? Gradle is one of the most popular and widely used build systems for Java, though this space is crowded and fractured. Gradle is relatively easy to use, for example, its configuration files are simpler than the XML-based ones in Maven, which is another popular build system for Java. Gradle is also the build system used by default in Android projects.
Where Do I Get It? The IDE gets it for you.
How Do I Learn It? Find packages to install at the The Central Repository: look for the package name to find its latest version, and follow the instructions for Gradle. Use the IDE to run the basic tasks, for example, compiling, and running the automated tests. Use gradlew (or gradlew.bat if you’re on Windows) to run Gradle tasks from the command line. If you need to dive deeper, refer to the Gradle Documentation.
Web Server: Javalin
What Is It? A Java library for developing web servers.
Why Did We Choose It? Javalin abstracts the low-level aspects of the communication between server and client while avoiding abstractions that would obscure how things work and confuse beginners.
Where Do I Get It? Add io.javalin:javalin as a dependency—the build system takes care of the rest. Besides Javalin itself, also add a logger, Simple Logging Facade for Java (SLF4J) (org.slf4j:slf4j-simple), so that Javalin can log important information while it’s running.
How Do I Learn It? Read the documentation.
JSON Mapper: Jackson
What Is It? A Java library for mapping back and forth between Java data structures and JSON.
Why Did We Choose It? Jackson is the default JSON mapper for Javalin.
Where Do I Get It? Add com.fasterxml.jackson.core:jackson-databind as a dependency—the build system takes care of the rest.
How Do I Learn It? Read the documentation and the wiki.
Testing Framework: JUnit
What Is It? A testing framework allows you to write automated tests, which are small programs that check that your application is behaving correctly. Writing tests often helps you figure out what that correct behavior should be. Also, the tests serve as a form of low-level executable documentation. Finally, the tests prevent future modifications from breaking the application.
Why Did We Choose It? JUnit is the most popular and straightforward testing framework for Java.
Where Do I Get It? Add org.junit.jupiter:junit-jupiter-engine as a dependency and configure the project to use JUnit following the example project for Gradle and Java.
How Do I Learn It? Read the User Guide.
Database Management System (DBMS): SQLite
What Is It? When we turn the server off, it forgets all the Java objects that existed in memory. If the application data was stored in those objects only, it would be lost. A DBMS persists the application data across server runs. Also, a database preserves data integrity and consistency, for example, it may enforce the constraint that all users in your application must have a phone number.
Why Did We Choose It? Typically a web application would use a DBMS with a client–server architecture (this is a client–server architecture with respect to the DBMS, in which the DBMS is the server and the application server is actually the client). The most popular DBMS with a client–server architecture is PostgreSQL. A client–server architecture scales better, particularly when multiple server components need to communicate with a central DBMS. But in this course we prefer SQLite precisely because it is serverless: the database is just stored in a regular file, which makes SQLite easier to install and manage. But there are some issues with deploying SQLite to Heroku, and if you want to avoid them, you have to switch to PostgreSQL.
Where Do I Get It? Add org.xerial:sqlite-jdbc as a dependency—the build system takes care of the rest. This Java library contains not only the driver that the server needs to connect to SQLite, but also SQLite itself.
How Do I Learn It? Manage SQLite with the database tools in the IDE. In your application, the server communicates with SQLite using a language called Structured Query Language (SQL). If you’re new to SQL, start with this course. Once you understand SQL, you must learn some things particular to SQLite, which you may find in the documentation. In particular, learn about SQLite’s data types and its dynamic type system, and the particularities of SQLite’s SQL dialect.
Client
Programming Language: JavaScript
What Is It? The programming language for the client side of your application.
Why Did We Choose It? JavaScript is the native programming language for the browser.
Where Do I Get It? It comes with the browser.
How Do I Learn It? To begin with, read the MDN Web Docs and this tutorial. These should give you a fair notion of the basics of JavaScript, but the language is evolving fast and in this course we use the latest features, so read this tutorial on what changed recently. Finally, keep up with the updates by searching the web for articles on ECMAScript 5, ECMAScript 6 (2015), ECMAScript 7 (2016), ECMAScript 8 (2017), and so forth. ECMAScript is the standard on which JavaScript is based. (Isn’t it fun that ECMAScript is updated every year but the version numbers don’t match the release year, for example, ECMAScript 8 was released in 2017?)
User Interface: Hypertext Markup Language (HTML) & Cascading Style Sheets (CSS)
What Is It? HTML is the language in which to define the contents of the user interface. CSS is the language in which to define the looks of the user interface.
Why Did We Choose It? HTML and CSS are the native languages for user interfaces in the browser.
Where Do I Get It? It comes with the browser.
How Do I Learn It? Read the MDN Web Docs on HTML and CSS.
User-Interface Builder: React
What Is It? A JavaScript library for rendering the user interface and keeping it up to date when the data changes.
Why Did We Choose It? This is a hot space in the software engineering world—there are many tools competing to solve the same issue. React is among the most popular, it is relatively easy to learn, and it’s based on simple ideas.
Where Do I Get It? Add React to the application using the simplest method, including support for JSX with Babel. To make your application work locally even if your computer is offline, download the scripts instead of using the versions at unpkg.com. This quick-and-dirty method wouldn’t be good for applications that have hundreds of users, or applications that must to be as fast as possible, but it’s simple enough: it requires just a couple of script tags, instead of a JavaScript runtime (for example, Node.js) and a JavaScript build system (for example, webpack). Also install the React Developer Tools for Google Chrome.
How Do I Learn It? Go through the tutorial and read the documentation, including the sections on JSX.
Client–Server Communication
Data-Interchange Format: JavaScript Object Notation (JSON)
What Is It? The server and the client communicate with a protocol based on plain text (HTTP), but they need to exchange data that is more structured than plain text, for example, objects, lists, and so forth. A Data-Interchange Format is a convention on how to format structured data in plain text.
Why Did We Choose It? JSON is an industry standard. It is simpler and more lightweight than the other popular alternatives, for example, XML.
Where Do I Get It? You don’t install JSON the same way you install, say, Java, because JSON is just a convention on how to format data. But while it may be possible to map back and forth between data structures in a programming language and JSON just by manipulating strings, you must use tools to streamline these tedious and error-prone tasks. On the server side, use a Java library; on the client side, use JavaScript, which already supports JSON natively (unsurprisingly, if you recall what JSON stands for).
How Do I Learn It? Follow this tutorial.
Deployment
Platform: Heroku
What Is It? A platform to run the server and make it available to anyone on the Internet.
Why Did We Choose It? Heroku is among the simplest platforms for deployment, because it favors convention over configuration. It provides many important features so seamlessly that you won’t even notice that they’re there, for example, Continuous Delivery (CD), a domain, HTTPS support, and so forth.
Where Do I Get It? Create an account.
How Do I Learn It? Read the documentation. In particular, read the instructions for Deploying Gradle Apps on Heroku and the Application plugin for Gradle. Also, note that there’s an issue with SQLite on Heroku: any time Heroku restarts your application, it does so in a fresh file system (a so-called ephemeral file system), wiping your SQLite database in the process. And Heroku restarts your application frequently: on every deployment and every time your application becomes idle for longer than 30 minutes. To work around this, seed your database with data on server startup, or switch to PostgreSQL.
Continuous Integration (CI) Server: Travis CI
What Is It? At its simplest, a CI Server grabs the code base from GitHub, runs the automated tests, and reports on the results. In general, you may configure a CI Server to execute any task, for example, packaging the application for distribution, deploying the application, and so forth.
Why Did We Choose It? Travis CI integrates nicely with GitHub, and it’s among the most popular CI Servers on the market.
Where Do I Get It? Visit travis-ci.com, not travis-ci.org (which is the legacy platform), and use the credentials from GitHub.
How Do I Learn It? Read the documentation. Configure Travis CI to run not only the JUnit tests, but also the Postman tests.
Documentation
Authoring Language: Markdown
What Is It? A language in which to write the project documentation, including the README, the CHANGELOG, and so forth.
Why Did We Choose It? Markdown is lightweight, simple, and supported everywhere in GitHub.
Where Do I Get It? The IDE already supports Markdown and provides a nice preview window of the rendered document.
How Do I Learn It? Markdown isn’t exactly a language, but a family of languages. There are many implementations of Markdown, and while they tend to implement the core features the same way, each provides different extended features. For this course, we use GitHub Flavored Markdown.