Front-end Development

BLOG
Front-end Development
USER | MEDIA INSTITUTE COLLEGEPosted by egskynet
DATE | MEDIA INSTITUTE COLLEGE On March 31, 2016
0 Comment

Last Time

The last blog we discussed some of the roles and desires of someone involved in Back-end development. I also gave a house analogy of how to compare back-end development to front-end: back-end people design the blueprint while front-end people are the interior designers. If you want to go back and see what I wrote in more detail, you can do so here.

Next Time

So what is the goal of this blog? It’s simple: to education and share information to those that are just starting out in the field and are looking for some clarification. We’ll go over some common roles, skill sets and (further along) techniques that will hopefully help you in your education and career choice(s). We’ve already discussed back-end and front-end development and it’s a fairly clear divide between the two with no other interpretations, right? Tune in next time to find out why this isn’t the case.

This Time

Since Back-end Development got to bask in the spotlight last blog, Front-end Development will get their turn for this session. The first thing that we need to understand is that in this context, Front-end Development does not mean the same as Front-end Design or simply Web Design. If you see a job title with the word “Development” in it that means that there will typically be coding involved. Not as much as Back-end, but it will be there: HTML, CSS and Javascript. The more coding you can do, the more marketable you will be.

Front-end Development

So Front-end Development is fairly straightforward: if you see it or interact with it as a user, that’s Front-end. All of the design, interaction and animation would be handled by front-end. For example:

  • How does it look? Is the color palette appropriate?
  • How does the user interact with the site or app?
  • Are the fonts appropriate?

Front-end Developers create the code and design that creates the structure of basis for the user experience. They work closely with UX and UI Designers to bring to life mockups, wireframes and rapid prototypes before they start the final implementation. As you progress up the career path, you can start to become involved in Usability Testing and have greater influence in the layout, design, and workflow. As with all parts of Development and Design, the more you know about the other roles the greater you can integrate all of the parts of the project for a stronger application or website.

Front-end Skill Sets

“I thought Back-end Development was about coding, so why do I need to know so much code for Front-end Development?” That’s a good question. As I’ve stated several times, the more code you know, the more marketable you’ll be. So if the Designers make the graphic assets and Back-end Development handle data communication, who makes the design live and breathe? Who gives the application or website life and gives the dynamic responsiveness so it works on mobile, tablet and desktop? That’s the role of the Front-end Developer. In order to bring the app or site to life, you’ll need to understand and excel at three main coding languages: HTML or Hyper Text Markup Language, CSS or Cascading Style Sheets and Javascript programming. HTML is the information that is contained on a website and all of the hyperlinks. It contains no actual design so if you see a raw HTML file it looks very simplistic. CSS is what gives the site or app its look: colors, fonts, sizes, layouts and so much more. These two languages are connected at the hip: in this day and age you can’t (or at least shouldn’t) have one without the other. Javascript is what gives interactivity. When you click on something, what happens? Does it trigger an animation? Does it start an information communication? Javascript controls all of these actions. Finally, just like with Back-end Development, knowledge of version control software like SVN, CVS, or Git are always appreciated at every stage. Here is a bullet list for easier digestion of what was just stated. Remember, this is just a starters list and by no means lists them all.

Interface

  • HTML
  • CSS
  • Javascript

Frameworks

  • AngularJS
  • EmberJS
  • Bootstrap
  • Backbone

Libraries

  • jQuery
  • LESS
  • SCSS
  • SASS

Version Control

  • SVN
  • CVS
  • Git

So what does this mean?

As you are reading this blog and looking around the web, any of the sites you visit may have been designed by a handful of people. The text was written by one or more copywriters and any number of people could of contributed to a site. But it’s the Front-end Developer is the one who assembled everything and converted it into what you are experiencing on each and every page. Without them, nothing becomes cohesive and the user will have a horrible experience.

I’m still having a hard time telling the difference apart from Front-end and Back-end Developers…

Just in case you’re still having difficulty either from the last blog or this one about the difference I kept this analogy. Think of a house being built: Front-end is the interior designers. They take the paint, the hardwood floors, the furniture and windows and everything else and put it together: all of the pieces that you interact with and make it livable and cozy. Back-end are the people that make the blueprints. They decide whether the house is a connected condo, a 10 bedroom mansion or a one bedroom starter home. Does the kitchen connect to the living room? Are the walls structurally sound enough to hold up the whole building? Do you need a fireplace and is there adequate ventilation? Does the plumbing support the size of the home? These are just as if not more important than the “look and feel” of the home. You need both roles to work in cohesion with each other to make a truly great product.

…that’s great, but why should I listen to you?

My name is John Maier and I have 16+ years of teaching and over 25 years experience in UI/UX and front-end development. I am the Head of Design for an international company that creates apps and websites for a variety of government roles in Europe and abroad. I’ve worked for fortune 15 companies in both entertainment and health care fields. One of the biggest issues I’ve always had with education and learning environments is that they teach with the assumption that everything will always work smoothly and with level headed people. This is rarely the case as often egos, politics and technical issues complicate matters. This blog will be honest and from my point of view- what I like to call “the real world.” As with any complicated topic, there can be 50 ways to do something differently than the way I suggest or discuss. You may not agree with my decisions or conclusions- to think otherwise would be vain. But that’s okay- I’m always willing to listen to other ideas as communication, discussion and yes, disagreements are how we learn and grow. Find out more about our Web Developer program.