Understand the front-end developer working on your Episerver digital experience project.
My name is Adrian, and I am Senior Front-end Developer at Adage Technologies. I specialize in React development built on Episerver. When people or organizations think about the components of a digital experience project the focus is often on back-end development or design. In this blog, we’ll take a look at the front-end developer role when building Episerver projects.
What is a front-end developer?
As many of you can imagine, building a website is almost like putting together a building’s structure. This process requires multiple phases and work is divided among differently skilled trades. Five or ten years ago, however, there wasn’t much differentiation when it came to digital professionals.
All individuals with some kind of web programming knowledge were simply called “Web Developers” or “Devs”. These developers worked with very traditional, Photoshop-based designers. But that era of “do-it-all” folks has passed. With the evolution of web technologies, one person simply can not handle everything (at least not well). Roles are also no longer as delineated.
Since I’m in front-end development section of that spectrum, I’ll explain what our involvement is in building a website. I’ll help you understand what our day-to-day and project-to-project work requires.
The name “Front-end Developer” tells you a bit about our job, which is to build components and features that are displayed on the front of your website. By front, I mean the elements that users see and interact with in their browser. I like to say that front end developers are the bridge connecting beautiful designs coming from the design department with complex functionality written by back-end developers.
The work of a front-end developer used to be focused all around simple user interface (UI) work. Basic IU work involved coding prepared designs into website templates. As time and technologies progressed, the front-end world became more complex and we as front-end developers (FEDs) are now involved in accomplishing bigger, better, and more interactive things. You can build a complete website application and with some of the latest development frameworks and tools, sky is the limit!
Again, front-end development in a nutshell: we take the design and prepare it for back end development. How does that happen exactly? I’ve divided our work into three areas and provided some detail about each one. Each section is based around a term that you would probably hear the coming from any FED team or department.
I’m talking about Markup, Styling, and Scripts.
Markup
The M in HTML stands for Markup (Hyper Text Markup Language), which is the base for any website. Every web page that you visit is using HTML. Even this very blog article is rendered with HTML so your browser can display all the elements with data that developer wants. Markup is the foundation for any front-end developer and the structure for every site or component. This is where we work with back end developers to plan the implementation in Episerver. We plan what properties need to exist in the CMS and what markup should be generated.
Styling
We could just write the markup and call it a day, but your website wouldn’t look anything like the beautiful design prepared by your design department. Styling gives us the ability to bring the boring markup to life: to really make it shine and stand out!
All styling is rendered using Cascading Style Sheets (CSS). A lot of developers use preprocesses (program that takes one type of data and converts it to another type of data) to make code more readable and life easier. At Adage, we use Syntactically Awesome StyleSheets (SASS), which later is compiled to CSS. Stylesheets web developers the ability to change colors, backgrounds, set widths, and more on our site.
Scripts
So after all markup is done and all styles are plugged in, we have a website that looks good, but has no interactivity to it!
We have all sorts of scripts that we can use to make stuff pop—from simple features like a content carousel to complex products such as our select-your-own-seat (SYOS) tool. Here at Adage, we’re true believers in writing a pure JavaScript code that is not dependent on any 3rd party libraries (jQuery etc.) to make code maintainable and compatible for years to come. We also write more complex components with use of frameworks such as React.
Splitting front-end development into these three areas is a bit of an oversimplification, but it still provides solid overview of the different tasks that FEDs work on. These three areas also demonstrate areas where the work of front-ends is notably different from our peers on the back-end.
