Nate, how did you get into front-end development?
I have always been into computers. When I was 10, my dad, an old-school programmer, brought home a computer for the family, and I was hooked. When I was old enough, I got a job at CompUSA and dove deep into computers and the BBS culture, and eventually landed a job at one of Wisconsin’s first, and largest ISPs, ExecPC. Over the years there, I was given hosting space to create my own website, and I immediately started tinkering with design and code, learning everything I could. I was also heavily involved in DJ culture at the time and hosted events for years. Later, I ran a small marketing and artist booking agency that helped DJs and promoters with marketing, event, and booking services across the country. Here I oversaw all their design, marketing, and web development needs. It was more of a passion project and not hugely profitable. One of my partners worked at Ascedia at the time and invited me to apply for a development position when it opened, and I went for it. That was 13 years ago.
Thanks for that intro. Now, let’s get into the meat of this conversation. Nate, what’s the difference between front-end and back-end?
Sure. First off, those lines are getting grayer and grayer by the day as technology progresses, but to me, the front-end is the user interface. It’s everything you see, touch, and interact with. Front-end also deals with accessibility and website performance.The back-end involves all the business logic. Getting data into the interface. So, when you press a button that queries something on a webpage, it will come back with the results and the actual business data.
Both are important, and both work together to create a fully functional site.
Recently you sent out an email to the organization announcing a new update to the Front-End Boilerplate by the Interface Development team. Talk about that and the benefits it brings to Ascedia.
The Front-End Boilerplate is a set of commonly used frameworks, plugins, tools, and workflows we apply to every project at Ascedia.For example, when we write code, we must compile it, and that takes time. Instead of there being a manual process a human must do, there is a workflow that will automatically do all the steps needed and output the correct data.
So, once we start a new project, we can use our Boilerplate and set up the front-end development environment with minimal manual work or searching for tools, and we are ready to develop. This dramatically reduces the time it takes to manually set up all the little pieces needed for a project to ramp up.
So, this is like a library of resources for front-end and design work?
That’s exactly it. We built the boilerplate to provide a consistent development environment between projects and to lower onboarding times in our day-to-day work. Anyone should be able to jump into any project and feel comfortable from the moment they start working on the project. We also build custom tools that help align our Development and Creative teams so that Creative is thinking about what is possible with code as they design, and developers are always considerate of design ideas while developing, both teams keeping best practices in mind along the way.
So, with all this, your speed to market is just that much faster, right?
That’s right. Between the consistency in code, the ease of setup, and best practices being in mind at every step of our creative and development processes, we can deliver a high-quality product in a shorter amount of time.
Okay, so we spent some time talking about front-end development. Talk to us about Bootstrap.
Bootstrap is a front-end tool kit. It provides some base styling and layout to a website and has a lot of code, accessibility, and performance best practices built-in, so we do not need to recreate those wheels every time we build a site.
For example, when we want to create a button on a webpage, typically we need to write a lot of code to make it look and behave like a button. Bootstrap has that code ready, so we can quickly say, “Here’s a button,” and it looks and behaves like you would expect and is accessible to anyone who comes to the site, no matter how they access a site.
Sometimes a designer or client might want to change something about that button, like how much padding is around the text, whether it has rounded borders, or if it should include an icon. With Bootstrap, we can easily make these updates in one place, and they will affect every button instance on the site.
Being an agency that specializes in custom development, we of course still write our fair share of custom code and styling for the front-end of a project, but we can prototype and lay out a page of content in a fraction of the time it would take us to do it manually every time.
So, what we are talking about is going faster, making things easier, and finally, to have consistency between all the team members working on a project.
Yes, that’s right. You got it!
Nate, you’ve been in this space a long time now, so, look in your crystal ball, and tell the readers: where’s front-end development going?
As I mentioned earlier, web development is changing, and it’s getting a bit more complicated. There used to be clear distinctions between front-end and back-end development, but now those lines are blurring. For example, when working with modern tools like React and Angular, you have both front-end and back-end parts.On the back-end, developers deal with things like the logic of the website and how the pages connect without needing to reload. This is where they set up the “business” part of the website.
In these modern tools, front-end developers focus on building individual parts, or components, which can be reused several times throughout a site, even within other components. Instead of creating a whole page from scratch each time, we can reuse these components in different projects to create beautiful, custom content on each page. Think of it like building with LEGO bricks, where you can take a brick, and use it within several different structures.
To make things even more organized, we are working on something called a “design system.” It’s like having a library of reusable components for both the visual design and the code that makes them work. This way, the creative team can make the visual parts and the developers can make the functional parts, and they can all work together easily. We are also exploring web components as a platform-agnostic approach to reusable components. They are simply CSS, HTML, and JavaScript that work in every browser and can be reused in any project, regardless of tech stack.
To answer your question, it’s all about getting more and more efficient at building sites while also delivering a high-quality product.
