Hundreds of books are published every day. Beginning authors dream of fame, some want to make money, others are just trying to talk it out. Everyone is sure that his work is worthy of all kinds of awards and praise. All crave attention, but in fact … with rare exceptions, no one needs.
If our parents and grandparents suffered from an information vacuum, the current age – the age of information noise. Philistine consciousness is attacked by thousands of facts, annoying advertising causes a gag reflex. Everyone wants to implant in our brains favorable to other people’s ideas, at any cost to capture the attention of the consumer, make us pay for unnecessary, in general, things.
Now imagine that you need to interest a tired of all this garbage person to read a book by an unknown author. How do you get the attention of a jaded public? How do you convince people that a new book is not just another trash, which will take away their most valuable resource — time?
I’m a programmer, writer, accountant, and just a creative person, so I decided not just to publish a book, but to make for it a modern and cool site.
Single Page Application (SPA)
On a normal multipage site, when you click a link, the server connection takes place. The server generates a large amount of code, passes it to the browser, and renders a new page from scratch. Each time you follow an internal link, you actually reload the whole site! Yes, modern browsers are smart enough to remember repeating chunks of code, but the server is still under a lot of loads.
For a long time, caching was the only way to offload the server. After the server-side generates code, the result of the work is remembered, and the next time the same resource is accessed, the final result is returned immediately. This had worked well and continues to work on static sites where content is updated quite infrequently. But if you write a lot of posts, use an internal commenting system, pull information from other sites, the user is constantly entering some data — alas, the results stored in memory will quickly become outdated and the server will have to redraw everything again.
But when you click on internal links, most of the site does not particularly change! Everywhere is the same “header”, “basement”, sidebar, and so on. Often you need to update a certain block of information, rather than render the entire page from scratch. Why ask the server for all of the information, if you need only a small part?
The essence of the so-called Single Page Application (SPA) is not that all the information on the site fits into one page. The idea is that the server once sends a user’s browser JavaScript code, and then with the help of that code the browser itself generates the HTML code and asks the server only small portions of the missing information. If you follow an internal link, the browser asks for new data and redraws a separate piece of the site. Nothing unnecessary.
Frameworks
Sounds logical and simple, doesn’t it? Then why didn’t developers come up with such an obvious idea earlier? The most interesting thing is that from a technological point of view, this possibility appeared long ago, but from a practical point of view, it became a trend only in the second half of the 2010x.
The complexity. There was no convenient technology to use better technology, sorry for the tautology)). To come up with all these twists and turns with a user’s browser at a time when every browser had specific features?! God forbid the Great Bit, it’s easier to make ten websites in WordPress in that time…
Even when someone did something like that, a code was so difficult to understand and non-standard that only a select few programmers could maintain such a project, and it cost a fortune to do so.
So, out of the ashes of the spaghetti code, rose… No, we will talk about the rise of the machines next time, but for now let us mention frameworks.
A framework is a structure on which to build an application rather than reinventing the wheel. As a rule, a framework is a set of ready-made libraries for typical tasks, such as authorization, routing (matching a page address with the code block responsible for processing it), data storage, etc. It is also a set of standards on how to write code in a way that doesn’t make it painful to make any edits or improvements to the application. A framework is an implementation of an architecture. Huge books have been written about good application architecture, I won’t even try to describe the concept in one simple succinct phrase. But most importantly, a framework is an inversion of control. It’s not the code written by the programmer that calls the library code, but the framework calls our code when it has loaded all the necessary dependencies and made all the adjustments.
All in all, it is not surprising that frameworks have rapidly gained popularity, and today any in-demand programming language can boast several frameworks that greatly speed up and simplify code writing.
Vue
The JavaScript language, which works directly with the user’s browser, has three popular frameworks: Vue, Angular, and React.
The oldest and most complex is Angular. I work with it on a long-running project, but since there were more than 4 developers who all wrote code at random style, it’s hard to understand the application. Components of four thousand lines of code, a complete absence of formatting, magic numbers – everything is as it should be so that no one could understand or correct anything.
Although the framework itself is quite interesting. If you’ve ever written code in Java (not to be confused with JavaScript!), Angular will be the best choice. Also from the plus side, I will note the libraries connected “out of the box” to solve almost all standard tasks. Install the framework, and you can immediately get to work.
React is the most popular framework. Another of its advantages – you can work at a fairly “low” level. That is, you can do almost anything, and even in more than one way. This is also its main disadvantage: each developer writes in his own way, and it will be difficult for a new person to enter a project.
Finally, the youngest framework Vue. According to the creator’s idea it was to include the best of Angular and React. In my opinion, that is how it came out in the end. Code on Vue is fairly concise and involves a lot of small, repeatable components. Each component has three blocks: for markup (html), styles (css), and a js code. This approach does not clutter the system with files and folders, and at the same time everything you need is in one place. The block dedicated to JavaScript is also quite logically divided into data, methods, calculated properties, etc., so it’s easy to find the right property or method. There are official libraries for routing, data storage and so on, so in most projects the basic things will be implemented by standard means, which greatly simplifies the entry of new people into the project.
For my authoring site, I chose Vue, which I have never regretted.
Vuetify
This is a library of website styling components written specifically for Vue. Beautiful buttons, panels, sliders, modal windows, a “grid” to make the site look good on all devices, and things like that. With Vuetify, you can create an aesthetically pleasing site without using a designer.
No one forbids the use of it and to make up already drawn in Photoshop or Figma layout — Vuetify significantly speed up the process, because each site has enough standard elements that are included in the library. A little tweaking of the ready-made components, and voila, everything looks amazing!
Nuxt.js
Single-page sites used to have one big disadvantage — search robots did not load JavaScript code and therefore believed that the content on the site is missing. Google and Yandex have long corrected this misunderstanding, but the programmer has to interact with the “experts” on search engine optimization sites, and these comrades do not always follow the progress in IT… Not understanding anything, they get into the source code and demand that the HTML contains all the content.
When the problem was really actual, a couple of guys created a framework over a framework so that applications written in Vue could be seen by search engine robots as usual multi-page sites. Now, this approach is no longer used for search engines, but it is used for faster initial loading. A server instantly gives up the basic markup and text content, then the heavy, by the standards of the Internet, pictures and JavaScript code. A browser immediately shows a page, and while a user is examining the content, it discreetly gets the necessary files for further work with minimal involvement of the server. That is a big plus, but it is very difficult to implement this way of working on your own. Nuxt.js does it “out of the box”!
Nuxt’s benefits don’t stop there. It turns Vue into a full-fledged framework: it defines application structure, simplifies routing and storage, provides convenient ways to deploy your application to a live server.
So Vue->Vuetify->Nuxt.js combination covers almost every need on the client-side of the application. All you need to do is not be lazy and read the documentation, it’s written great for all three technologies.
Laravel API
We’ve got the “frontend” sorted out, but what about the server-side? Here, fortunately, or unfortunately, without many alternatives, the Laravel framework has become the de-facto standard for PHP language development. And PHP, in turn, has long held a leading position among the server-side programming languages for web development.
Moreover, as we saw above, the role of a server for a single page application is quite modest. When certain events occur, a browser sends requests, the server responds with a minimum of information, and then the browser displays everything itself.
In my case, the server part is used to subscribe to the newsletter, collect statistics on downloads of the book, and, most interestingly, collect information about typos. Any user can highlight text in a book, click on a button and report the error.
In the admin, which is also written in Laravel, without any twists and turns with single page applications, all the necessary data is displayed.
About the book
About the book itself, I will not tell for a long time. I suggest you go to the site, download or read a couple of chapters. In an electronic form, the novel is freely available.
Genre: dark ostrosocial fantasy, dystopia.
At this time only available in Russian.
Annotation:
The events of the book unfold several generations after the apocalypse that wiped out all life. Only a handful of dwarves managed to hide deep in the depths of the mountains, betraying their fellows and all other sentient races.
Left in isolation, society is rapidly degrading. Divided into rabble and nobility, they hate each other. Even more so, everyone despises the guards, the king’s elite soldiers.
The situation grows more heated by the day, and a food crisis of unprecedented proportions arises.
The main character, the heir to a wealthy family, successfully exploits the situation by reselling the poor for triple the price of tainted food. Neither he nor the ragamuffins, deprived of any hope for the future, suspect that soon they will have to pay for basic food not with money, but with their lives.
Thank you for your attention!
