WEB DEVELOPMENT TECHNOLOGIES FOR NON-DEVELOPERS

We all use the Internet and different web applications every single day but only a few people actually know how it all works. If you're not a developer, then concepts like front-end, back-end, servers, databases, as well as frameworks, libraries, and all the programming languages that developers use to build apps and websites can seem like a confusing mess of technical jargon. Of course, there are tons of resources about web development out there but most of them are rather complicated and you have to be tech-savvy to understand them.

Thankfully, we are here to help! The reality is that you don't need any coding skills to learn the basics of web development processes and get a good idea of the different components of a typical technology stack. In this article, we'll cover everything you need to know about web development technologies in a way that non-developers can understand.

Lets start with the following points

• the difference between front-end and back-end development and how they work

• programming languages (JavaScript and PHP)

• popular frameworks for front-end and back-end development.

Whether you're a hiring manager, a marketer, a copywriter, a product manager or a salesperson in a tech-based startup, knowing how to talk about web development is essential. So let's get started!

Front-end vs Back-end

Before we dive into web development technologies, lets briefly examine what happens when you view a webpage in a web browser on your laptop or smartphone.

The web consists of billions of webpages. The computers connected to the web are called clients. A client could be your computer or your phone, for example, but also includes the servers that store apps, webpages, and sites.

• When you type a web address into your browser, it sends a request message to the server and asks it to send a copy of a webpage to your device

• If your request is approved, the server sends the websites files in small chunks (packets) so that many people can access the same webpage at the same time

• Your browser loads the chunks of data, assembles them into a webpage, and shows it to you.

When discussing website functionality, we have to distinguish between front-end and back-end processes. It's best to think of these like two sides of the same coin and both are equally important.

• Front-end is everything you can see and interact with in your browser: text, images, buttons, animations, navigation menus, sliders, contact forms etc. This is the face your site or app presents to the world

• Back-end is everything that happens under the surface. These are the processes that happen behind the scene on the servers and databases that are invisible to you when you access a website. These processes power all the great features you interact with when using the internet.

Front-end Development

Front-end development is responsible for creating the face of the web pages you interact with. A word of warning, front-end development is not the same as web design! Web designers create the look and feel of a website or web app (including its layout, and the appearance of items like buttons etc.) while front-end developers focus on technical issues and transform these designs into something functional using a combination of HTML, CSS, and JavaScript. We'll now examine these languages in more detail:

• HTML is an abbreviation for Hyper Text Markup Language that allows developers to create simple static webpages that just showcase information. Developers can structure this information using HTML tags for headings, paragraphs, tables, lists etc.

• CSS stands for Cascading Style Sheets. This language is used to describe the visual aspects of a website such as the layout, fonts, colors, dimensions, animations etc.

• JavaScript is one of the most widely used front-end programming languages, used to make websites interactive and create a dynamic user experience. It is responsible for responding to your interactions with the website, making database requests, loading data from other web services, and showing or hiding necessary elements on a page. This powerful language allows developers to create complex web apps. JavaScript runs in a web browser and Node.js allows developers to run JavaScript on the websiteu00e2u0080u0099s server. Basically, Node.js is JavaScript that runs at the back-end.

Speaking of back-end development.

Back-end Development

Much like Miles Davies said about jazz being the notes you don't play, the back-end of a web application is all about what you don't see when you use the internet. The back-end consists of the database, server, operating system, and application programming interfaces (or APIs, which serve as an intermediary that allows two applications to talk to each other and share information). This back-end or server-side portion of a website or web app is responsible for storing and organizing data and ensures that everything on the client-side of the website works properly.

For a website to work, the front-end and the back-end need to communicate with each other. For example, when you type a web address, fill in a contact form, book a flight or make a purchase in an online store, you interact with the front-end and your browser sends a request to the back-end or server-side. Server-side scripts process your request, pull the necessary information from the database and return this information in the form of the front end code which is interpreted and displayed by your browser. Visitors can also change the information in the back end database from their browser which will record their input and data. You do this when you upload photos to your Facebook profile, create an account at e-commerce store, or post articles to CMS.

There are a variety of programming languages for back-end development which differ in size, compatibility, and performance. Some common back end languages are PHP, Python, Ruby, Java, C#, C++, and .Net.One of the most popular languages is PHP and the majority of websites (83% of them including Facebook) are built on it. PHP supports a wide range of databases and allows web developers to create dynamic content that interacts with databases.

Frameworks

When making complex applications, software developers typically use a framework which is actually a set of files, folders, code, and objects. A framework is a pre-built structure that developers can build upon which allows developers to avoid writing tons of complex boilerplate code, simplifying and speeding up the development process. A framework differs from a library, which is the collection of components that developers can add to their own structures.

Here are some of the most popular JavaScript frameworks for front-end development.

• React is actually a library created by Facebook

• it is used for building user interfaces. The latest version is 16.8 but various versions don't actually differ much

• Angular is commonly referred to as Angular 2+ (the latest version is 8.0.0 beta). This framework is developed by Google and written in TypeScript. It's a complete rewrite of Angular 1.x which is commonly known as Angular JS. There are some major differences between Angular 1 and Angular 2

• Vue.js is a lightweight framework which is called progressive because it can adapt to the needs of developers

• Ionic is a framework for building cross-platform hybrid apps

• and PhoneGap are mobile application development frameworks

• Meteor JS is a full-stack JavaScript framework for building web and mobile apps

• NativeScript is a framework for creating truly native mobile apps.

There are also JavaScript frameworks for back-end development.

• Next JS is used for building server-rendered apps and static websites using React

• Express JS is the minimal and flexible web application framework for Node.js

• NestJS is a framework for developing scalable Node.js server-side applications.

Now lets talk about frameworks for PHP.

• Laravel is the most popular PHP framework although it is relatively new. It's suitable for building apps with complex back-end requirements and focuses on simplicity so it's good for inexperienced developers. Laravel versions are often not compatible with one another

• Symfony is great for developing large enterprise projects and targets advanced developers

• Many content management systems, for example, Drupal and a popular framework Laravel use the components of the Symfony framework. There is a huge difference between Symfony 1 and Symfony 2-4

• Magento is a framework and a Content Management Framework (CMF) which is used for building e-commerce stores. Magento 1 uses Zend Framework 1 and Magento 2 uses Symfony

• Yii (which stands for Yes, it is!) is one of the oldest PHP frameworks and its latest version Yii 2 is object-oriented

• Wordpress is a Content Management System that is used for building blogs and static webpages

• Shopify and Opencart are Content Management Frameworks for e-commerce platforms

• Drupal is a CMF that powers millions of websites and applications, including our company's website

• Zend is a scalable framework with lots of configuration options so it is ideal for building complex enterprise-level projects although it is not easy to learn.

Now that we've clarified the most basic concepts and tools of back-end and front-end development, you're equipped to discuss web development like a pro! Want to learn more? Our blog features many similarly useful articles to help even the most tech-averse of individuals!