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.
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.
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:
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!