Organizing Lunch&Learn session at work is crucial for making sure that your employees are always on track and always keeping up with new things. At Pretius we just had such a pleasure when Sebastian Fituch, our FE developer, made a presentation for us called “Front-end for back-end developers“.

Javascript is the most popular programming language in the world with so many external libraries that make some people joke that if there won’t be any new javascript library within a week then the world will end. While it’s stronger brother TypeScript is now third fastest growing programming language in the world according to GitHub. So that’s where we started.

Typescript is developed by Microsoft. It’s nothing more than JS but with some extra features and those features make it easier for Back-end users to get familiar with front-end faster and object-oriented programming.  However, in the end, it is still compiled to plain Javascript.  It features such as pointing out errors at the time of development and static typing.

As I said before, new things appear in front-end technology almost every day. We had bower, then npm and now we have yarn.

Sebastian wanted to share with us his thought about those technologies to make it easier for others to make a decision. While bower is already old and doesn’t support many desired features the choice between npm and yarn might be hard for some people or might have been before 2018. Both of those tools make a great package manager. But one of the main differences between them was package-lock.json but it has been already added to npm with version 5.0 and that made it even more difficult for people to choose their tool. Plus, npm doesn’t send usage information to Facebook.  This might be a dealbreaker for some people.

At the beginning, there was inline included js file. Then we merged all our files into one.

Now we merged them into one… but differently 🙂 We have grunt and gulp as task runners where grunt uses configuration over code approach while gulp code over configuration. Those approaches are the key differences and you must choose your own approaches based on your own desire and what you actually want to accomplish. There is also webpack which is a module bundler. It helps you bundle all your files.

But there is more to it. To help back-end developers improve their front-end skills and a better understanding of this technology ESLint is a dream come true. It’s the most popular linter. Completely customizable. It is capable of fixing most of the reported errors and can be added through terminal or IDE’s plugins.

What would front-end be without it’s CSS ? Thankfully we not only have CSS but also preprocessors generating CSS such as Sass, Less, Stylus and…PostCSS. Sass, Less, and Stylus are preprocessors generating CSS basing on its own syntax. They add features such as variables, nesting, and mixins, loops and functions. Post CSS is a tool that changes CSS basing on its own plugins.

When you start your own personal career as a programmer most often it will be just you and the code. When there is only one person in a project you don’t have to worry about different styles in every file. Why would you? You wrote it. It’s just safe to assume that those files will have the same advantages and disadvantages. The problem appears when you have to code within a group of developers. You need to choose one style for all the files. But how to maintain it?

One of the answers is EditorConfig. The project consists of a file format for defining coding styles and IDE’s or text editor collection of plugins that can read the file format and define styles. With this help, you don’t have to worry about several coding style approaches within one file or project.

DRY. Please DRY. Please don’t repeat yourself. Or as others may say. Don’t do something that was already done.

Great help for every developer working on front-end tasks is a library called lodash.

It contains a large number of functions for iterations, array, objects, strings manipulations. It doesn’t have any external dependencies and is extremely well documented. New javascript syntax partially replaces some lodash functions but still if you can’t find js syntax for certain operation there is a good chance that you will find one in lodash.

There aren’t many things that a computer has a problem with than tracking time. In JS Date API is very poor and manipulating with it is very hard and problematic. When you have to remember about time zones it gets even worse. That is why you should use Moment.Js and date-fns. Both of those libraries resolves mentioned problems and are very easy in use. They are well documented and can get you up and going with time problems in no time.(pun intended).

Every developer working in front-end projects and tasks has to communicate with API. Right now probably the easiest way is with using axios. Promise based HTTP client for the browser and node.js great documentation, entirely configurable. A large number of mechanism “out of the box”. Axios can save you a lot of time while working. I highly recommend that you use axios in your projects.

You know,  jQuery is something funny. People add this external library even before they start writing any code. It came to this that some people forgot how to use selectors in vanilla javascript because of using $(‘’) all the time. The funny thing is, you don’t need jQuery. With every new EcmaScript JS is getting better and better and right now it has better solutions to a lot of problems than jquery. Instead of Ajax use fetch or add axios, document.readyState instead of document.ready and vanilla javascript selectors are faster than the ones in jQuery. With DOM interactions it is best to use frameworks, angular, react, vue. jQuery animations? Passe. Have you seen what CSS can do? You can perform all kinds of animations using just CSS. You don’t need jQuery for that.

So why use frameworks? State synchronizing manually is hard. Its manipulation is hard. With help of frameworks. Like using react and redux for example we take care of a lot of problems right away. You don’t need to constantly look if your state management is doing fine. Without frameworks, it is hard to keep the code clean and in a module. Starting the website all by yourself takes time. Frameworks can help you get started with the basics. Frameworks like react has very good developer tools that help you test and debug you code. They give you ready to use solutions, you don’t have to worry about that. Also with the help of frameworks, you completely separate HTML from Javascript, which is a good thing.

New frameworks keep appearing all the time. But it’s nothing to worry about. AngularJs is with us from 8 years, React 5 years and since Angular 2 years have passed. Well maintained frameworks will have new versions coming up every now and then. They will be improved and so will your project.