Vinsloev Academy
Published in

Vinsloev Academy

Develop Your First Web App — Tips and Tricks For Beginners

In this article we will walk through some of the basics of building a web applications and how you as a beginner can avoid wasting your time, simply by doing your job smarter.

The need for IT professionals is ever growing whether it’s within software engineering, web development, cybersecurity, network administration, the list is almost endless. Discover content from Vinsloev Academy that matches your personal learning goals within the area of IT. — https://vinsloev.com/#/discoveryCenter

In case you would like to build your own web application right away, we also have Angular Accelerators that can be used as out of the box foundation for web development. See more on https://vinsloev.com/#/accelerator

What is a Web App?

Based on wikipedia https://en.wikipedia.org/wiki/Web_application the definition of a Web Application is:

A web application (or web app) is an application software that runs on a web server, unlike computer-based software programs that are stored locally on the Operating System (OS) of the device. Web applications are accessed by the user through a webbrowser with an active internet connection.

In this article we will extend a bit upon this by stating that a Web Application most contain a Frontend GUI and a Backend. The mentioned critia is true for most web applications, however some web apps are limited to a Frontend only and will therefore not have a Backend to support its operations. The rest of this article will therefore focus on tips and tricks within Frontend Development, Backend Development.

Frontend Development

When developing the Frontend of an Web Application there are several design choices that has to be taken into consideration e.g will it be build as part of the language/framework used for the Backend or will it be built upon a framework separate from the Backend and how is this affecting the deployment of the application?

Separate the Backend from the Frontend

One of the main advantages of separating the Frontend from the Backend is that you enhance the reusability of your code. This is utilized through Web Services, which connects the two in production. e.g if you which to change your Frontend all you need to do, is to allow a new source to access your Backend services and vice versa as the relationship between them is not tightly coupled. Nowadays many single page frameworks exists which enables you to develop a powerful Frontend independent from the Backend codebase e.g Angular and React.

Bootstrap(mobile friendly)

When it comes to designing the Frontend GUI within e.g Angular or React it’s important that you dont reinvent the wheel and spend 100 of hours trying to design something from scratch. Unless you’re designer and experienced with CSS and JavaScript this can become a complex task as the design needs to scale properly to a wide range of screens(Being Mobile friendly). To avoid spending too much time on this you should take a look at the Bootstrap toolkit, which will provide you with basic design elements and responsive mobile-first components. Even if the name does not sounds familiar to you, there is no doubt that you have already interacted with a web application based on Bootstrap as this is the worlds most popular open source frontend toolkit.

Bootstrap Designs — https://getbootstrap.com

Inspect other pages code

Even with Bootstrap as the backbone of you GUI you might find yourself in need of some cool UI elements that you have seen somewhere else online. As with Bootstrap there is no need to reinvent the wheel and try to replicate such yourself. Instead a often overseen trick is to simple take a look at the other pages code and replicate what you need for that particular feature. This very simple trick can be utilized through the browser, by simple right clicking on a page and inspecting that element:

Inspecting Google.com

Backend Development

With the above tips and tricks for getting started with a independent Mobile first Frontend, we will dive into some basics to be aware of when developing a Backend.

Look for strengths in the choice of language.

When it comes to building you Backend it’s important to look at the strengths and weakness of the different programming language. As we have made our Frontend using e.g Angular or React, our choice of programming language do not depend on a language specific framework as it would have done if our Frontend was based on e.g Thymeleaf which is Java based. We can therefore focus our attention towards the business logic of our application. If our application is centered around a Machine Learning task it would be smart to use Python as our backend core language whereas if we where to develop our application as a portfolio app to show off our skill level to potential companies when applying for a job, it would be smart to use a language mentioned in the job description we’re interrested in.

Don’t reinvent the wheel

Depending on the language your choose for you Backend you would find that a lot of frameworks and libraries does already exists, similar to the Frontend where Bootstrap is more or less the standard. So before developing anything from scratch e.g implement a given algorithm or make a SFTP connector try to investigate what frameworks already exists as this can save you a lot of time!

The above five Tips/Tricks might seem as no brainers, but even experienced programmers and developers do often forget some of these and waste countless hours implementing something that they could have aquired with very little effort. At the end of the day the success of your Application does not depend on wether you have spend 10 hours or 1 hour to implement a given algorithm or to make a certain component mobile friendly as long as it works for the end user!

--

--

At Vinsloev Academy we strive to change the world by making software development skills available to all who wish to learn and evolve.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vinsloev

At Vinsloev Academy we strive to change the world by making software development skills available to all who wish to learn and evolve.