Week 11th at Jadu
Hi Guys I hope you are doing great !!
In this blog I’ll tell to all of you about some most important concept that related to web application so let’s get started!!
mostly students ask me what means??
Lightweight in Web Application??
Single Page Application??
Progressive Web Application??
Multipage Web Application??
Lightweight in Web Application??
A webapp can be a component in a compound document. This (simulated) screendump shows a Celsius-Fahrenheit converter running inside an OBJECT element inside an HTML page.
The light-weight, Web-based applications (“webapps”) of this essay are small, platform-independent programs that are downloaded on demand and execute inside a client program, such as a browser. They are thus like Java applets, but more “script-like” than “program-like” and therefore easier to write in many cases (though harder in others). They have a clearly separated user interface, that allows webapps to be easily adapted to different devices.
A trivial example is a Celsius-Fahrenheit converter: it runs inside your browser window and contains some code that calculates a number for every number you give it. Its UI might be two sliders, or two text input fields, or a text field and two buttons. You stop it by pressing the browser’s back-button or maybe the program itself has a stop button.
Single Page Application??
a single-page application is a web application in which content is loaded dynamically without needing to reload the page. For example, as you check your feed on Facebook or Twitter or your email in the Gmail web app, you don’t see an aggravating page loading screen. You scroll and switch between tabs and content is loaded instantly.
In a single-page web app, all HTML and CSS is loaded once, when you open the page. After that, as you move around the site, only the new data is loaded; the page itself doesn’t reload. This makes the user experience smoother — there’s little to no waiting time, for one thing, and pages appear to load instantly. In a world where a 100-millisecond lag can bring over $1.6 million in lost sales, that’s an issue business owners can’t afford to ignore.
Single-page applications are built with JavaScript frameworks, and developers choose the framework depending on a number of factors, including personal preferences. Here are the big three JavaScript frameworks
React
The slowest of the big three, React also has fewer out-of-the-box features than the others. It does have built-in protection against cross-scripting attacks, however, and it’s developed and used by Facebook. React is the most popular JavaScript framework today.
Angular
Angular has lengthy code but the most built-in features, so it requires fewer extra technologies in your stack than React or Vue. Developed and used by Google, Angular is the second most popular JS framework.
Vue
The youngest JavaScript framework and hence only gaining popularity, Vue is the easiest to learn and has more features than React but fewer than Angular. Vue is an open source project and is developed by the community, which makes it quite promising.
Most good frontend developers know more than one framework. Many know React, Angular, Vue, and then some.
Advantages of single-page applications
1. Fast page loading
Fast and smooth switching between pages, with no need to actively reload, has become the biggest weapon in the SPA vs MPA battle. Dynamic loading — loading content in small parts instead of all at once — greatly shortens response times, improving the user experience.
SPAs partially move content processing from servers to the browser. This way, there’s less need for the browser to send requests to servers and await responses. Thanks to this, SPAs can even work offline to an extent.
2. Separate the front end and back end
One of the other advantages of SPAs is that unlike MPAs, in which the front end and back end are tightly connected, in an SPA, you can rewrite the front end alone, with a minimum effect on the back end. This makes updating SPAs easier, faster, and cheaper. But a bigger perk of separate front and back ends is that you can use an SPA back end for a mobile application if/when you decide to build one. With an MPA, you’ll need to rebuild the back end for a mobile app — not from scratch, but significantly.
3. Development and maintenance
Building an SPA takes less time than building an MPA. It’s not necessarily easier — the tech stack for an SPA is slightly larger than for an MPA — but it does take less time, since there’s no need to write code and create separate UI/UX designs for each page.
Besides that, the advantages of SPAs include greatly simplified Chrome debugging thanks to native developer tools for the three most popular JavaScript frameworks.
Now on to the drawbacks
What’s an MPA?
A multi-page web app is what we consider a traditional website — when moving from one page to another, the site fully reloads. With this kind of website, loading can sometimes be a bother, especially if your connection speed is slow and you need to visit multiple pages with media.
Without taking too close a look, it might seem that MPAs are a relic of the past and will soon be all but extinct. Surely, faster page loading is always better for sales. However, it’s not that simple, and there are cases when an MPA is the better choice.
Advantages of multi-page apps
1. Navigation
The biggest perk of multi-page web apps is that they allow for traditional navigation. By that, we mean that each page of an MPA has its own URL that users can copy and paste, add to bookmarks, share, etc. The backward and forward buttons in browsers also work without a hiccup. In an SPA, to make separate URLs and enable users to jump back and forth between inner “pages” via buttons, your developers will need to employ an API.
2. Scalability
Here’s an undeniable advantage of multi-page web apps: with an MPA, your website is as scalable as you want it to be. You can build dozens upon dozens of pages, dividing content for easier navigation and faster loading. Since SPAs usually load the whole website structure — the DOM — once, if your website has a lot of code (if you have an online store, for example), building it as an SPA will require extra technologies in your stack. This is why it’s not uncommon for web developers to suggest MPAs for online stores instead.
3. SEO
If your business relies heavily on search engine results, consider a multi-page web app, as they usually rank better. An SPA’s dynamic content loading gets in the way of search engine crawlers, an issue MPAs don’t face. Whereas SPAs once again require your developers to employ additional SEO technology, an MPA is naturally on good terms with search engines.
4. Tech stack
Being the older of the two types of web apps, MPAs have a more developed tech stack and a somewhat bigger developer community. Also, while they take longer to develop due to the numerous pages, multi-page web apps are built with a simpler and smaller tech stack than SPAs.
SPA vs MPA — Which one to choose?
To summarize all we’ve laid out above, look at the following table outlining the major differences between a single-page and a multi-page web application.
Speed and performance
SPA
Dynamic content loading eliminates page reloads and shortens loading times.
Development
SPA
Despite the bigger tech stack, developing, testing, and launching a single-page web app takes a lot less time than developing, testing, and launching a multi-page app. There’s no need to write code and design an interface for multiple pages.
Navigation
MPA
To make an SPA where users can easily navigate back and forth as well as share links to a specific location on the site, developers need to use APIs.
Scalability
MPA
MPAs are infinitely scalable, whereas to scale an SPA, your developers might need to rewrite big chunks of code.
Security
Tie
While people always point out how SPAs are exposed to cross-scripting attacks, MPAs also have security vulnerabilities, including weaknesses against injection, which is similar to XSS. The key here is to know about these weaknesses and build in protection.
Adaptability
SPA
Single-page applications are inherently more flexible when it comes to design. They’re easier to adapt from desktop to mobile and vice versa.
Additionally, an SPA back end can be reused for a mobile app, usually along with the interface design.
SEO
Tie
To make SPAs SEO-friendly, your developers will need to employ server-side rendering and keep in mind tags from the very beginning of development. But it’s not difficult, nor is it a lengthy process. So today, it’s not much of a drawback for SPAs compared to MPAs.
A Progressive web apps
Progressive web apps, or PWAs, have been a web development trend these last couple of years. In short, a PWA is a mix between a web app and a native app. At their core, they’re web apps — usually single-page apps — as they use JavaScript, HTML, and CSS. But they can be anchored to a smartphone’s home screen and to some extent work offline, like a native app.
You know how you can create shortcuts to apps and folders on your computer’s desktop? PWAs work in a similar manner, but they create app-looking links to web pages on your smartphone’s home screen. With the latest tech stack and APIs, they load a certain amount of data to the smartphone’s cache so the app can operate offline if needed.
PWAs aren’t yet as feature-rich as native apps — they can’t use NFC, Bluetooth, or smartphone features that require certain permissions. They don’t offer complete offline functionality either. But they’re flexible, easy to build, cheap to develop, and place a constant reminder of your website on users’ phones.
SEO optimization is possible. The app has multiple pages, and each of them can be optimized for a specific group of requests to get free organic traffic from Google.
Ease of scaling. This architecture type allows creating as many new pages for each product or service as you like and implementing any changes in them.
Available ready-made solutions. As a rule, MPA development requires a smaller technology stack, and besides, a wide range of ready-made solutions (CMS) are available.
Analytic capabilities. Web analytics tools like Google Analytics can be easily integrated into this type of project and allow tracking each business page’s performance.
Cons of the Multi-page Application:
Possible performance issues. In case of a large number of requests and the necessity to reload a large number of pages, performance and speed will inevitably take a knock. This is especially true for projects with high website traffic, a large number of pages, and multiple functions.
Front-end and back-end tight integration. As a rule, these components of a web app are deeply integrated, and that is why it can take longer to develop and test them.
Maintenance and updates. It can be a daunting task to provide technical support to websites with a lot of pages. This issue also applies to security matters.
The Choice Is Yours
MPA or SPA? There is no definite answer which of them is better as everything depends on the web app features you are going to develop and the tasks the app should deal with. Customers should make a choice based on their business needs and technical requirements for a specific project.
If your website has to show a large number of products or services and SEO is an important channel for you to attract customers, a multi-page application is a right choice for you. If you want to provide maximum functionality in limited web space, create a dynamic platform, or flexibly manage large amounts of data, a single-page app is your more suitable option.
Stay Connected with me for new some excited blogs on technical topics!!!
