Front End Web Developer
Load a website in your web browser and click around. Every click that does something other than load a new page is the work of a front end web developer. They are in charge of the scripting and programming that runs inside your web browser. Utilizing HTML5, CSS3, and JavaScript, they create dynamic web applications. They allow users to create, read, update and delete data with ease from a single page.
The front-end web developer goes beyond web design. Web Designers create marketing websites. Front-end developers program what happens after the user login. They build the user interface of custom web and mobile apps. Being tied to user interaction, they are often called User Interface/User Experience Developers (UI/UX).
HTML5
HTML stands for Hyper Text Markup Language. It is the basis of the world wide web. Tim Berners-Lee created HTML to semantically describe scientific documents. But as the web became mainstream, the public adopted the standard. HTML defines the behavior, placement, and styling of web page content. It implements a standardized set of rules all browsers understand. Known as tags, these HTML entities wrap content describing its intent to browsers.
HTML communicates not only the website layout but the intent of the content. This is important in Search Engine Optimization. It's also important to keep website code organized.
HTML5 was a significant upgrade to the HTML standard. It incorporates advanced functionality as compared to previous versions. Some of the features include video, audio, 3D graphics, and an interactive canvas.
Both a Web Designer and Front-End Web Developer need extensive knowledge of HTML.
CSS3
CSS stands for Cascading Style Sheets. Deep knowledge of CSS is critical to creating websites that are aesthetically pleasing. Cascading Style Sheets describe how the browser should present an HTML page. It provides instructions on colors, widths, heights, fonts, and alignment. CSS references standard HTML elements to control the general look and feel of a website. Developers can add specificity through the insertion of class attributes into the HTML. The attributes apply handles to the HTML elements. Style sheets can then target and manipulate only those classes.
CSS3 is the newest implementation of the standard. It gave developers control over rounded corners, shadows, gradients, transitions, and animations. It also expanded layout behavior control over multi-columns and introduced the flexbox attribute.
CSS Preprocessors
CSS Stylesheets are difficult to maintain. Enter the CSS Preprocessor. They allow developers to write lean stylesheet logic with variables and reusable code. Popular processors are SASS and LESS (we like SASS).
A front-end developer can set up global defaults in one place for easy modification. Say you need to change all your branding colors across thousands of pages. With SASS or LESS, the developer can change it in one place within seconds. The processor generates the actual stylesheets for deployment anytime there is a change.
Responsive Design And The Front End Web Developer
Over 50% of traffic in the United States is mobile. That number is much higher in other countries. You don't want to lose more than half of your prospects. So, your site must change to conform to the screen size of the device in a usable way. HTML5 and CSS3 combine to solve this. They allow the front end web developer to control your website's layout based on ranges of screen size. It doesn't matter if your visitor is on a desktop, laptop, mobile phone or tablet. It doesn't matter what operating system or browser they use. They will have a good experience.
JavaScript
Have you ever used an old shopping cart? Sometimes they warn you at checkout: "DON'T USE THE BACK BUTTON!" You might get charged twice. That's one of the many issues of non-Javascript sites. They were pretty clunky. If something on a page were to change, you only knew if you reloaded the page. Websites weren't very smart before JavaScript.
JavaScript allows websites to be more visually creative through animations. It makes possible dynamic features. For example, notification indicators on Facebook show you new likes in real time. JavaScript makes Web 2.0 applications possible.
Front-end developers use JavaScript in web design and development universally.
There are few modern websites that don't use it to some extent. JavaScript has a lot of strengths. It executes in the user's browser taking processing load off the web server. It works across operating systems and browsers. It is asynchronous. That means it does not have to wait for an action to complete before doing another action. Asynchronous code is more complex than synchronous code. But, the advantages far outweigh the extra work.
JavaScript Frameworks
Today, most front-end developers use JavaScript frameworks such as ReactJS and AngularJS. These frameworks provide a lot of out-of-the-box functionality. Their use lowers user interface development cost. They keep front-end code uniform across the application. They also assist developers in dealing with the complexities of asynchronous API calls.
REST and API Servers
Representational State Transfer is a standardized method for communicating with a remote server. JavaScript runs in the browser. That means every call to a server behind the scenes is a remote connection. When that remote server follows this standard structure, it is RESTful. With REST, the front-end developer can make some basic assumptions. They know what behavior to expect when creating, reading, updating or deleting data.
The traffic cop on the server for this communication is an API. The API makes authorizes each request. It also provides the rules by which the user interface has to play. API structure and development is usually the purview of the back-end developer. The front-end and back-end developer work together through the API.
Mobile Apps and the Front End Web Developer
On mobile and tablet devices, a web application can behave much like a typical mobile app. When allowed by the user, this can include access to the camera, photo library, microphone, and geolocation. But the user still has to access the website on their device through a web browser. And there is little connection to the device for features like notifications. Sometimes you need a mobile application.
There are two types of mobile app: Native, and Hybrid.
Native Mobile Apps
Developers build native apps specifically for an operating system. For instance, they wite Android apps in Java - using the Android Studio Integrated Development Environment (IDE). They write iOS apps for Apple devices in Objective-C and/or Swift using the XCode IDE. There are advantages to native design for resource-intensive applications. Games are an example. Also, apps that manipulate audio, video or photos.
The downside is, you have to develop your app twice - once for each platform. They can not share code. And usually using different development teams specializing in each language. This doubles your cost. It adds another project management layer. And, it creates consistency issues across apps. That inconsistency can be bad for your customers and staff. And, the cost increase may be unnecessary.
Hybrid Mobile Apps
Most business apps deal with basic data. They have no heavy processing requirements. So, a "build once - deploy twice" hybrid strategy is often smart. A hybrid mobile app is much like a web application. The difference is it connects to the mobile hardware through plugins. Plug-in libraries have satisfied almost every conceivable need these days. The front-end developer also has more creative power with interface design. They have access to the same JavaScript and CSS features available on the web. They are not limited by the operating system's IDE.
The Right and Left Brain Front End Web Developer
It's actually pretty rare to find someone who excels at both CSS and JavaScript. CSS is very visual-focused while JavaScript is very logical. This means that often you will need two user-interface developers working together. One will have more expertise with CSS. The other will be more focused on JavaScript. When two developers work together in this manner, we call it Pair Programming. A pair programming team can produce more quality work than the individual programmer.
Websuasion Meetup
Are you interested in learning more about front end web development? Come to our free monthly meetup. It doesn't matter if you are a budding programmer or a business owner looking to hire. No experience is necessary. We will guide you through the workflow and make ourselves available for questions. Sign up on the Cloud & Mobile Programming - Atlanta South (Fayette) page on Meetup.com.
