Hexlet 3.0: Practical Tutorials on Browser Programming

    Hello, Habr!

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

    About a month ago, a new beta version of Hakeslet! There are several important innovations, but the main idea of ​​Hexlet.io is a full-fledged practice on programming in the browser. The main difference from other projects (for example, Codecademy or CodeSchool) is that there are no simulators on the Hexlet: in each lesson you work with a full-fledged machine connected to the network. This allows you to train and learn not only programming, but also working with databases, servers, networks, frameworks and so on. Roughly speaking, if it runs on a Unix machine, it can be trained on Hexlet.

    In this article I will talk a little about iterations of development (how we came to this format and why we consider it to be correct), about the new version, and also about technical implementation. But first, about the lessons now available.

    What lessons are available now?


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

    • Java 101 . An improved version of the old Hexlet’s most popular course. An introduction to the Java programming language from an engineer from Amazon.
    • Python 101 . An introduction to the Python language 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 exercises in Python.
    • Git base . Lessons about version control systems and Git in particular.
    • Distributed systems . Lessons about DNS using Amazon Route53 as an example, load balancing with 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 and toxicmt Mokevnin and I decided to combine his efforts in practical training at the workplace and my efforts in online academic learning, and to create a new educational platform for programmers. The main points were formed:

    • Long, large-scale courses are often ineffective, they do not pass well and finish, 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 inefficient and dangerous. Practice should take place in the most realistic setting.

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

    1. Theory . This is text and / or video based on a problem, 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 options and tasks “fill out the form”. Conceptual understanding is tested, not memory.
    3. Exercise in the browser . In the HTTP lesson, we gave people a terminal in the browser and asked for special HTTP requests using the telnet utility. In this way, students understood all the “guts” of the protocol and manual interaction with the server. The differences between HTTP 1.0 and 1.1 were immediately demonstrated.
    4. Practice on your computer. The user downloaded a special console utility, logged into it using the API key we provided, downloaded the task with it, 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, using the code, it was sent to our server, it was automatically checked and evaluated.


    Theoretical part of the lesson over HTTP

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

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


    Iteration 2. Tenge Platform


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


    One of the stages in the discussion of the interface

    The idea of ​​practice on your computer was key for us: where is it even more real than real development on your machine, with the installation and configuration of the environment? But too many people ran into problems, so we decided to wrap everything we needed in a virtual machine. Now the user did not download a simple utility, but a virtual machine (using Vagrant), in which everything was already configured. For example, if the lesson on rails is inside the finished environment under 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, especially the Russian version of Windows, had the most problems. At the same time, we learned that a huge number of people are still using Windows XP. Think about it: there are people in the world who use the operating system that appeared before their birth!


    Exercise Page Appearance Option

    With the payment of lessons, too, there were troubles. We thought in the style of “iTunes for lessons” that each lesson costs from $ 0.99 to a couple of dollars, but only Apple, Google and Coca-Cola (roughly speaking) can handle such micropayments, and we would go broke. Therefore, we made a system with replenishment of the internal account: users bought virtual currency - Hexes - and then bought lessons for them. It was fun, but many did not understand anything, so the Hacks had to be replaced with dollars that everyone understood.

    Fun fact: the dollar there was inscribed 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 the crazy idea: to do all the 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! No more separation into browser exercises and practice. There is no weird domestic currency and no deposit. After a year of experimentation, the new Huxlet is:

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



    Practical task in the browser. You may notice that Redis is running on the virtual machine.

    How it works?


    The hexlet is written in Rails, the entire infrastructure revolves on Amazon, several specific Amazon services are used for databases and storages, queues and mail.

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

    The 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. Website, 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, another fairly new technology saved us - ReactJS and the Flux concept. Our Hexlet IDE is open source .

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

    We invite authors


    Each experienced programmer can create practical lessons for Hakeslet. 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 to test it.

    Here is a detailed tutorial on creating your first lesson. We have a special group on Facebook for authors . Now we are developing a transparent system for distributing subscription income between the authors of the lessons.

    Thanks for attention!

    Only registered users can participate in the survey. Please come in.

    What to talk about in the next article?

    • 49.2% On the technical implementation of the platform 130
    • 22.3% About Hexlet as a startup: hypotheses, experiments, training and attracting investments 59
    • 14% About How to Create Hackslett Lessons 37
    • 14.3% About the Hakeslet Development Process 38

    Also popular now: