Introduction to Programming

This is a quick-and-dirty introduction to programming. It consists of a walkthrough followed by 3 Workshops in which you will apply what you've seen.

• Programming Basics
• Workshop Requirements
  • Versions used
  • Instructions
• Workshops
  • Workshop 1
  • Workshop 2
  • Workshop 3
• Resources
  • Programming Concepts
  • JavaScript
  • React
  • Extras

Programming Basics

Before you get into any of the hands-on material below, I advise you to familiarise yourselves with the concepts we will be making use of in the workshops.

If you're not familiar with what variables are, how we manipulate data with instructions and most importantly, how functions come into play, please have a read-through of the material covered in the first two sessions of this beginners series: Introductory Sessions

Please read on if you feel you're comfortable with all of the above.

Workshop Requirements

Editor

You will need a suitable editor for your code. Some people will say you should code everything from the command line. Please don't trust those people. A visual is always helpful, especially at the beginning.

My personal preference, just for its versatility and portability (i.e we can use it with any of the operating systems: Windows, Ubuntu, MacOS) is Visual Studio Code. You are free to use whatever strikes your fancy though. (I will put some other suggestions in the extras at the bottom)

Dependencies

You will need to make sure you download and install the following in order to get us up and running with our application.

• yarn

Versions used

• yarn: v0.27.5

Instructions

Download or clone the available code

We are going to be using github as a very valuable resource with which if you go down further the path of programming you will find is very darn useful. Think of it as a huge library of other people's ideas and implementations of these ideas. It also allows you to interact with other people's code, like you will do in this workshop!

Go to the Introduction to Programming repository (fancy name for 'online folder' if you will) and download the code as a zip. (If you want to see more interaction with the git interface just go the resources for our other workshop: Tools For Programmers - Git Workshop)

Run the app

• Go to the workshop-1 or workshop-2 folder location (where you've unzipped/cloned the intro-to-programming folder)

• You will be using either normal navigation for this (i.e visually, by navigating through folders) or the command line. If you've successfully installed Visual Studio Code there is also the option to Open Folder in there, then use View -> Integrated Terminal (alternatively, get in the habit of using keyboard shortcuts: Ubuntu, Windows, Mac)

• yarn

  This installs all other required dependecies for you

• yarn start

  This will start the web app development server usually at http://localhost:3000/

Change some code:

Go to /workshop-1/src/js/Todo.js and change the description message. The app should re-build itself and reload the content with your changes. You are free to change whatever in that file or in any other one. Active involvement with ToDo.js and Snek.js will be going on in the first and second workshop, respectively. The third workshop will see us going back to an online code compiler.

Workshops

There are three workshops that you may attempt with the knowledge acquired from the introductory material. The workshops consist of changing different components in the same application in order to apply the basic principles or programming: ...

Workshop 1

In this workshop we will go ahead and apply the acquired knowledge to a real-life application.

By putting together the pieces for a To-Do Application we will dynamically see our code shaping the outcome of the program. Striving to understand how everything puzzles together is one of the beauties of programming.

Workshop 2

In this workshop we will get a small insight into the world of making games via programming by building the logic and functionality for a simple snake game.

By putting together the pieces for a Snake Game we will see how we can mimic through code the classic snake game, make it move, feed it, etc. This offers a great introduction to some of the workings of how logic for games are actually made and you may just realize it's far from difficult :)

Workshop 3

To be continued...

Resources

Programming Concepts

JavaScript

• Eloquent JavaScript - 2nd Edition
• Loads of Javascript libraries available out there

React

The React JavaScript library has seen an incredible rise in popularity because of its ease of use and compatibilities. React Native is another JS library built on top of React, used especially for mobile phone applications.

Extras

Other editors

• Good article mentioning the most frequently used editors by "programmers"
  • Notepad++
  • Emacs
  • Vim
  • Atom
  • Sublime Text

There are many debates over this, like over every other possible topic which requires the tiniest bit of customizatin in programming. Ultimately, just use what feels more confortable, don't bother reading too many of the 'Why this one?, Why that one?' at this stage. Obviously everything is about trade-offs with editors as well, like with programming langauges, but at the end of the day you're only dipping your feet in programming now. Relax.

Other languages