Front-end-end development is booming! Nowadays, almost every business owns a web application. Web applications ease continuous delivery and support multiple devices, an important aspect of IoT (Internet of things).
In the past, we were building rich servers with thin clients. Nowadays we build rich web clients with a thin server or even serverless.
Since modern front-end-end development has evolved so much, it can be challenging for newcomers or developers who want to switch to front-end-end to get an overview of what to learn and which technologies are essential in a modern front-end-end stack. But don’t worry. 😉 This blogpost will give you a summary of the most critical technologies you should learn if you want to become a front-end-end hero. 🦸
The fundamentals of every web application
- HTML: structure of the website
- CSS: styles of the websites
HTML — the structure
HTML stands for “Hypertext markup language” and is the standard markup language to create websites. HTML uses tags to create a structure of the web page. A list of all common tags can be found here.
Each tag can have
attributes can be used to control the behavior of the elements. The most common attributes are
We use the
class attributes to categorize all buttons as
primary. This form of categorization now allows us to drop in some CSS to style all the
CSS — the styles
CSS stands for “Cascading Style sheets” and defines how our HTML elements are displayed and laid out on the page. A CSS stylesheet consists of multiple CSS rules. Each rule has the following base structure:
Each selector queries one or multiple HTML elements and applies the defined style rules to it. In this case, we query the
button element and change it’s
CSS has a lot of concepts. And there’s a lot to discover. However, I would recommend you to take a look at Flexbox. Flexbox is very powerful and, in my opinion, currently the best way to create layouts and align-items.
An HTML element that has the CSS rule
display:flex will be converted into a flex container and define a
main-axis and a
Flexbox defines two properties,
justify-content that allow us to layout child Elements across those axes. The elements can be laid out at the start, center, or end. Further, Flexbox is also able to distribute the remaining space evenly between or around children automatically.
At this point, it may be hard to imagine what I mean by that. Let’s have a look at a concrete example. Imagine we have a
ironMan object, and we want to extract its properties into variables. Let’s start with the ES5 version.
And now, let’s take advantage of the syntactic sugar offered by ES6 🍬. Let’s have a look at a nice ES6 feature called “object destructuring.”
“Object destructuring” allows us to use a shorthand syntax to take out object properties and store them in variables. Also, ES6 introduced constants(
const). Which is a new way of declaring read-only variables.
Chrome developer tools
Like it or not, as a programmer, no matter what language you use, there will be a time where you need to debug. Debugging in web development differs from the debugging of other languages like Java. In front end development, the runtime isn’t a virtual machine, but the browser.
Therefore, we debug using the Chrome developer tools. The debugging experience in the browser is pretty similar to the one from IDEs. We first set a breakpoint in our source code and can start interacting with the page. We also get a step over or step in button.
The Chrome developer tools are not only useful for debugging. They are also handy for performance analysis, SEO analysis, memory analysis, or inspecting HTTP requests.
Imagine you implement a UI component that calls a customer service.
You know that this customer service will deliver a Customer. But you have no idea what kind of properties the customer object contains. Does it include a
name or a
lastname. We don’t know. 🙈 The only way to figure out the properties is by looking at the API docs.
Let’s check ou the same code in TypeScript.
getCustomer method returns a
Customer. But, the great thing is that we now have type safety. So if we would call this method, store the customer in a variable and then try to access a property, we would get nice Intellisense.
Furthermore, we would also get a compilation error, which means that our application would not build if we would access a wrong property.
Node & NPM
NPM — the node package manager
NPM contains a package for almost everything. Usually, you start by browsing packages on npmjs.com.
Once you found a suitable package, you can open up a terminal and use the node package manager (
npm command) to install a package to your local project.
npm i svg-to-ts
Once you installed a dependency, it will be added to a
package.json is a file that defines all the dependencies and versions used in this project. It also distinguishes between
Installing and managing your dependencies is fantastic. But, NPM offers, even more, namely “scripts.”
NPM script is the tool to use when handling front-end-end development tasks like serving a page, running tests, transpile or compile code to build a production bundle.
package.json we can create any script we want. Those scripts consist out of a name and a command which usually is an executable binary.
Each npm script can be run from the terminal with the following command.
npm run scriptname
Scripts can even be combined or executed in parallel. Running and combining scripts gives us the power to automate any development task.
Using Vanilla JS for simple web pages can be pretty cool. However, it can be pretty cumbersome once you encounter a more significant project.
- you manually have to handle DOM manipulation
- you have to solve many technical issues yourself
- no standardized way of approaching things
Frameworks provide you with a lot of concepts and out of the box solutions so that you can focus on implementing features instead of losing time to solve technical issues.
Angular is a Typescript based open-source web application framework that helps us create unique single-page applications (SPAs) developed by the Angular team at Google.
Angular is more than just a framework; it’s a platform. It offers an out of the box solution for many requirements and comes with a very opinionated architecture which is very sustainable in more significant projects.
React is an open-source library that is developed by Facebook and mainly used in high traffic applications such as Twitter or Facebook itself.
Compared to Angular, React is extremely unopinionated. This offers more flexibility but also increases the challenges since you have to solve many things yourself.
Vue is an open-source framework created by an ex-engineer from Google, Evan You.
Vue has a lower learning curve but also a lower community and smaller Ecosystem than React and Angular.
Cool stuff — teach me more!
Does your team come from the backend and want to transition to modern front-end-end development? Do you want to learn more about the content described above and get some hands-on experience?
If you want to master Angular or State Management, you should reach out to us for one of our other workshops.
🧞 🙏 If you liked this post, share it and give some claps👏🏻 by clicking multiple times on the clap button on the left side.
Feel free to check out some of my other open-source libraries.