The New Trend of Web Application Architecture
Blogged by Christian Armada
April 11, 2016
Web app development basically is creating an application that can be accessed in a web URL. It can be a mailing system, social media, blog, file sharing and so on. But how is it made? What people has used to or what people used to know is just you code into a backend whcih renders data coming from the database to an HTML. Pretty simple? Basically the server side codes communicates with the database like PHP to MySQL by manual queries declared in the backend or Django to PostgreSQL with the use of ORM(Object Relational Mapper). This is the tradional way of building an app but that was back before the 21st century where IOS Apps and Android apps are not yet popular. But this time it's different. Web apps are now build via API and the use of javascript framework is recommended.
What is a Web API? There are many blogs and explanations regarding this but I'm going to explain it in the most basic way with the least technical explanation. An Web API(Application Programming Interface) simply serves as the middleware between a javascript and a back-end logic. You send a request to the API endpoint (the url of the Web API) through JSON format and then the Web API will return an HTTP response. So this is too technical what does that mean? Think of a Web API as a customer representative you send a request to them like a JSON format string {'name':'Dean Christian Armada'} then the customer may add the name to the database or give you information depending on their work description.
Web APIs are made via back-end coding but the recently popular is the Django Rest Framework which as the name exactly says it is made for creating Web APIs with the Django framework.
So what is a javascript framework? Surely a web developer must know or at least be familiar with Javascript. The most basic use of javascript is to manipulate the DOM or CSS. Simply just change the HTML or CSS currently in the page real-time. When you see a pop-up message when you click a button, that is an example of a javascript. So what is the other use of a javascript? Let us discuss it with a javascript framework as javascript's capabilities is very many and I'm going to suggest AngularJS.
AngularJS is capable of routing but what is routing? An example of routing is youtube. Click a video in there but notice that only a part of the page changes(Check the header it does not reload) that is an example of routing.
Don't worry I did not forget about the Web API and web app development. So another capability of the AngularJS is the HTTP request which is very similar to jquery's AJAX request. So am I getting too technical again? In the second paragraph I sent a request "{'name':'Dean Christian Armada'}" that is a JSON format request which I mentioned on the second paragraph as well. This JSON format request is the one that is being sent to our API via HTTP request or jquery AJAX request. So that explains the communication of the front-end and our API
After this explanation, you might be asking questions like this:
1.) Why bother developing a Web API when I can just use primarily the server-side regarding database transaction or data concerns?
2.) How does the API approach benefit web development or web app development?
3.) Why would why I bother using a javascript framework when I can just use a Jquery library?
4.) Why did I recommend Django and Django Rest Framework?
Answers:
1.) Why bother developing a Web API when I can just use primarily the server-side regarding database transaction or data concerns?
- It is true that Web API is not needed regarding the capabilities of database and data retrieving concerns on a web app. However, Web API becomes essential when the team suddenly decides to develop other types of app like IOS or Android. How come? Because what will happen is the IOS or Android developers just needs the endpoint of an Web API just like the ones in the web app to do transactions similar on the web app with just simply a request and response to those endpoints.
- Web API is also used to let other applications to communicate with your application. What does that mean? An example is facebook, Do you know that you can embed all your facebook post on your website? And people can also like yout facebook post on your website? That is an example of other applications communicating with your application.
2.) How does the Web API approach benefit web development or web app development?
- This approach clearly separates the front-end development and back-end development. For example, the back-end developer is plainly focused on the creation of Web API and database structure while the front-end developer is plainly focused on the creation of javascript, html and css.
- They just communicate when the front-end developer needs to confirm the endpoint and the data that is needed to pass to render the data in the HTML
3.) Why would why I bother using a javascript framework when I can just use a Jquery library?
- Jquery can also do what AngularJS can do, that is true. However, when developing scalable apps Jquery code structure becomes confusing and too messy.
- JSON objects that will be passed to an API is also very easy to create using AngularJS
- But I did not say that you don't need Jquery anymore. There are some instance where you need jquery like using the bootstrap.js and based on what I have experience the jquery-ui is more convenient than angular-material(Use jquery-ui in an angular-directive).
4.) Why did I recommend Django and Django Rest Framework?
- Python is a very powerful language and is very comparable to ruby and java. Django is considered one of the best framework out there. Django Rest Framework is very smart and convenient when it comes to creating API.
- Those three that I mentioned above(Python, Django, Django Rest Framework) has good documentations, good community and have great third-party libraries.
- Despite that python currently is a popular language for data science with libraries like sci-kit learn for machine learning, pandas for data analysis and many more
Since I have already mentioned front-end framework, I will add a little bit of knowledge on this topic. Front-end framework is not limited to only javascript but also CSS and HTML. For CSS we have Bootstrap as the most popular CSS framework and HTML5 is the latest version of HTML.
So in conclusion, web API will bring a lot of potential to your web app and creates a platform on your team development and what is left for the team is good communication. I will provide a link on a very basic web app with the use of AngularJS and DJango Rest Framework. There will be clear code comments as well for documentation and explanation.
Here is an example of a very simple web api app built in Django Rest Framework and AngularJS: https://github.com/Dean-Christian-Armada/web-api-example