Est. Reading Time: 5 minutes
This is post 2 of a collection of posts. If you’d like to start at the beginning see: From Front-End Development to Full-Stack Engineering, the Casual Journey
The front-end web development world as we know it is changing and it’s changing fast! In my next few posts I will be going over a few new web technologies that I believe will change everything we know about development from back-end and front-end to middleware and frameworks. Get ready to understand the lingo and go from ‘Front-End Developer’ to ‘Full Stack Engineer’.
First I’d like to define some of the basics as well as some new things that I myself had to refer back to multiple times. You think you know what these terms mean but then you start to question everything. So I wanted to lay out the basics first so we can always be on the same page. Also if you get overwhelmed, it’s expected… there is a lot to take in and most of it isn’t even in the same universe as HTML/CSS so give yourself a break if it doesn’t click right away. Just keep paddling and eventually it will start to get clearer.
I do plan to build on these as I come across things when covering each topic but I will be sure to reference back when I do.
Client-side refers to the operations that happen on the client (users) end. Typically a web browser that fetches something from a server. Anything processed by the browser for example is client-side.
Examples of client-side technologies:
Server-side refers to the operations that happen on the server side of things. It is basically things that happen before the browser gets the data. Think about viewing source… you never see the PHP or other server-side code you only see the processed HTML.
Examples of server-side technologies:
- ASP, ASP.NET
- Cold Fusion
Below I briefly describe the different roles that go into websites.
Note that I said BRIEFLY. These descriptions don’t do the roles justice. For instance a good web designer knows a lot more than how to use photoshop/illustrator… we are talking about everything from knowledge of industry to an understanding of human behavior and UX/UI. Just as the IT Department handles a vast load of roles from engineering systems to installing streaming media servers. The list of duties for each role is long which is exactly why I kept it brief!
Web Design is the actual visual design of a web page. Designers typically use software like Adobe Photoshop/Illustrator to create graphical mockups.
Web development is the coding or building of a web page. This comes in 2 main forms, back-end and front-end.
- Front-end Development is typically HTML, CSS, JS basically making the design come to life in the browser/device and function as it should
- Back-end Development is typically programming in languages like PHP, .NET, Python etc. also deals with data and business logic
IT Department typically handles the hardware, server setup and management, networking, system design, backups etc.
“A full-stack web developer masters the best of all worlds (or to a minimum understands all worlds). (S)He will be able to steer the web projects in the right direction utilizing the best practices and latest advancements in the technology.” – Wait, Wait… What is a Full-stack Web Developer After All?
Wikipedia says “A web application framework (WAF) is a software framework that is designed to support the development of dynamic websites, web applications, web services and web resources. The framework aims to alleviate the overhead associated with common activities performed in web development. For example, many frameworks provide libraries for database access, templating frameworks and session management, and they often promote code reuse.”
I like to think of frameworks in general as wheels or helpers. We don’t want to reinvent the wheel and if we are going to be building a car we would build it around the already invented, tested and proven wheel. This helps us to not have to invent it ourselves. There are front-end and back-end frameworks and each have different feature sets.
Examples of front-end framework features:
- Grid systems
- Media queries
- Design file stencils
- Some even have GUI (drag and drop) build tools
Examples of front-end frameworks:
Examples of back-end framework features:
- Web template system
- Database access, mapping and configuration
- URL mapping
- Web services
- Web resources
Examples of back-end frameworks:
A preprocessor is a program that takes one type of data and converts it to another type of data. In the case of HTML and CSS, some of the more popular preprocessor languages include Haml and Sass. Haml is processed into HTML and Sass is processed into CSS.
Just like frameworks there are different types of preprocessors for different things and each have different feature sets.
Examples of HTML preprocessors:
Examples of CSS preprocessors:
More coming soon…