Hexlet 3.0: browser-based programming lessons

Hi, Habr!

We have already written about the launch , restart and development of the educational project Hekslet. The project was made possible largely thanks to the support of Habrasoobschestva and the administration (especially deniskin ). Thanks you!

About a month ago, the new Hexlet beta was released! There are several important innovations, but the main idea of ​​Hexlet.io is a full practice in browser programming. The main difference from other projects (for example, Codecademy or CodeSchool) is that there are no simulators on Hekslet: in every lesson you work with a full-fledged machine connected to the network. This allows you to train and learn not only programming, but also work with databases, servers, network, frameworks, and so on. Roughly speaking, if it runs on a Unix machine, it can be trained in Hexlet.
')
In this article I will talk a little about the iterations of development (how we came to this format and why we consider it to be correct), about the new version, as well as about the technical implementation. But first - about the lessons now available.

What lessons are available now?

New lessons on Hekslet appear every week. Here are some of the lesson courses available now:

• Java 101 . An improved version of the most popular course of the old Hekslet. An introduction to the Java programming language from an engineer from Amazon.
• Python 101 . An introduction to Python for anyone familiar with the most basic syntax.
• Erlang 101 . Erlang language for beginners from the developer of Wargaming.
• Introduction to algorithms . Sort, complexity, graphs, trees, Turing machine, P vs. Np. Practical tasks in Python.
• Git base . Lessons about version control systems and Git in particular.
• Distributed systems . Lessons about DNS using the example of Amazon Route53, load balancing using the example of Amazon Load Balancer and inter-regional load balancing.

List of all courses .

How did we come to this format

Iteration 1. Tenge

At the beginning of last year, Cyril toxicmt Mokevnin and I decided to combine his efforts in practical workplace training and my efforts in academic online learning, and make a new educational platform for programmers. The main theses were formed:

• Long, large-scale courses are often ineffective, they are poorly passed and completed, it is difficult to isolate the necessary information from them because of the heap of dependencies in each lesson.
• Learning to program without practice does not make sense in most cases.
• Practice in simulators is ineffective and dangerous. Practice should take place in the most realistic situation.

Based on this, we made a prototype - a special lesson format and a test lesson about the HTTP protocol. They even decided to invent a name for this format of lessons - teng (textbook + engineering). The idea of ​​the format is to combine the theory (textbook, textbook) with real practice (engineering). Each teng is autonomous, that is, it makes sense by itself, and not as an integral part of a long course. Teng consists of such steps:

1. Theory These are text and / or video based on a task, so unlike traditional academic theory, we focus on a specific problem that has already been solved by clever engineers and programmers, and then follow their steps to understand the solution.
2. Test With answer choices and tasks "fill in the form." The conceptual understanding is checked, not the memory.
3. Exercise in the browser . We gave people a terminal in the browser via HTTP and asked to perform special HTTP requests using the telnet utility. Thus, students understood all the “guts” of the protocol and manual interaction with the server. It also demonstrated the differences HTTP 1.0 from 1.1.
4. Practice on your computer. The user downloaded a special console utility, logged into it using the API key provided by us, downloaded the task with its help, then wrote a program on his computer and checked it with our tests. In the example with HTTP, it was required to write your HTTP parser in any programming language. Then with the help of the code we were sent to the server, automatically checked and evaluated.

The theoretical part of the lesson on HTTP

We launched the site and started selling a lesson for $ 1.99. The theoretical part was free. After a couple of hundred purchases and a huge amount of feedback, we realized that:

1. OMG! It works!
2. A console utility written in Python is a pain, especially if the user is on Windows.
3. Need to continue because see point 1

Iteration 2. Tengov platform

From the very beginning we wanted to make exactly the platform, so that everyone could come and create their own lessons. Therefore, after testing the first hypothesis, we proceeded to create a platform for lessons in the teng format.


One of the discussion stages of the interface

The idea of ​​practicing on your computer was key for us: where is it even more real than the actual development on your machine, with installing and configuring the environment? But too many people faced problems, so we decided to wrap everything we needed into a virtual machine. Now the user downloaded not a simple utility, but a virtual machine (using Vagrant), in which everything was already configured. For example, if a lesson on rails is inside a ready environment for Ruby, rails, a web server, etc.

This worked better than in the last iteration, but there were other problems: with Vagrant and VirtualBox. As always, the owners of Windows had the most problems, especially the Russian version of Windows. At the same time, we learned that a huge number of people still use Windows XP. Consider: there are people in the world who use the operating system that appeared before their birth!


Option page appearance exercises

With the payment of lessons, too, had their own troubles. We thought in the style of “iTunes for lessons” so that each lesson costs from $ 0.99 to a couple of dollars, but only Apple, Google and Coca-Cola are able to process such micropayments with profit, and we would be ruined. Therefore, we made a system with the replenishment of the internal account: users bought virtual currency - Hexes - and then they bought lessons for them. It was cool, but many did not understand anything, so Heckes had to be replaced with dollars that everyone could understand.

Funny fact: the dollar rate was entered there in the code, 35 rubles, and was used almost until the winter of 2014.

After several months of open testing, we decided to return to a crazy idea: do the whole practice in the browser.

Iteration 3. Hexlet.io

Now everything fell into place! No more endless attempts to debug a specific version of VirtualBox on a specific Windows configuration! There is no more division into browser exercises and practical tasks. No strange local currency and account replenishment. After a year of experimentation, the new Hekslet is:

• autonomous lessons, which can include up to three steps: theory, practice and test
• real practice in the browser, with the terminal, editing files and accessing the network
• $ 9 monthly subscription for practice access
• free theory for everyone

Practical task in the browser. You may notice that the virtualis running Redis.

How it works?

Hekslet is written on Rails, the entire infrastructure is spinning on Amazon, several specific Amazon services are used for databases and storages, queues and mail.

For each user, a docker-container is raised, in which everything that the author of the lesson decided to include in the lesson is running. These containers are lifted on a special “eval” server. It has only Docker and can only access it from Sidekiq, asynchronously. Ideally, I would like to come to the scheme, where for each user a full-fledged virtual machine rises.

Docker is used not only for lessons, but also in the production of the system as a whole: each service is wrapped in its own container. 1 container = 1 service. Site, Redis, Grafana, etc. Most container images are made from tutum.co .

For some time we were looking for a ready-made browser development environment, but in the end we wrote our own. Here we were saved by another fairly new technology - ReactJS and the Flux concept. Our Hexlet IDE is in open source .

Technical implementation is a separate big and interesting story. If you are interested - vote, and in the next article we will tell about everything in more detail.

We invite authors

Each experienced programmer can create practical lessons for Hexlet. It is not necessary to record a video, you can do text lessons. The main thing is practice, and practice is, roughly speaking, an interesting task + unit tests for its verification.

Here are the detailed instructions for creating your first lesson. We have a special Facebook group for authors . Now we are developing a transparent system of distribution of income from a subscription between the authors of the lessons.

Thanks for attention!