'Javascript libraries for SPA [closed]

I am thinking of creating Single Page Application (SPA) and was wondering if there is something like jQuery for extending Javascript and make it work everywhere in the same way, JayData for OData support & LINQ queries in Javascript.... Something dedicated for SPA, but I am not aware of. Any suggestions?

javascripthtmlsingle-page-application


Solution 1:[1]

Anatomy of a traditional webserver

Server-side:

  • / -> maps routes to controllers
  • Controller -> combines Model + View to build a response
  • View -> handles dynamic templating
  • Model -> defines the data structures and methods used to fetch data

Client-side:

  • Browser makes requests

Example GET request:

Browser requests a resource -> server routes the request to a controller -> controller fetches data from the model -> controller uses the view to generate html -> controller sends response to browser -> browser reloads and renders the DOM

Anatomy of a Single Page Application

Server-side:

  • / -> redirects requests back to the browser as /#!/*
  • /api/ Controller + Model - routes an API requests and builds a response from the model

Client-side:

  • /#!/ -> maps routes to controllers
  • Controller -> combines Model + View and updates the DOM
  • View -> handles dynamic templating
  • Model -> fetches data from the API via AJAX

Example GET request:

User requests resource in browser -> client routes request to controller -> controller fetches data from model -> controller uses view to generate html -> controller updates DOM

There's a few key distinctions that make an SPA:

  • the majority of the processing gets offloaded to the client
  • only one page (ie index.html) gets loaded by the browser
  • hash fragment /#!/* (aka hashbang) URLs prevent the page from refreshing
  • the app stays loaded until the user leaves the page
  • additional resources are fetched dynamically via AJAX

Note: Technically a SPA router isn't necessary but it makes navigating between pages a lot easier.

The good:

  • SPAs reduce load on the server-side allowing greater scalability
  • eliminating refreshes makes for a nicer less jerky user experience
  • front-end developers can build the whole ui in the browser
  • the back-end team doesn't have to deal with ui/templating
  • with data decoupled as an independent API, data can be used on multiple platforms (ex mobile app)

The bad:

  • increase load on the browser/DOM
  • some search engines+ may have issues indexing
  • don't work in browsers when Javascript is disabled

+Webcrawlers have been improved recently to support Javascript so they can index SPA. In the past you'd have to generate static copies of the pages and serve them to the crawler from the server-side.

Now, to answer your questions:

jQuery for extending Javascript and make it work everywhere in the same way

jQuery can be used to load everything dynamically but I wouldn't suggest it. You also have to be careful about managing events and updates to the DOM. Why build a house out of clay when you can build it out of bricks?

JayData for OData support

OData is nothing but REST with statically-typed responses. Javascript is a dynamic language so -- even if it supported OData - there would be no benefit in using it. If you use TypeScript it does support it's own flavor of JayData but you'll also need a transpiler to convert Typescript to ES5.

LINQ queries in Javascript

There is a LINQ library available for Javascript. If you're talking about LINQ-to-Objects and not LINQ-to-SQL.

Something dedicated for SPA, but I am not aware of. Any suggestions?

Yes, the newest version of the React framework leverages the new VirtualDOM to prevent DOM/layout thrashing, introduces a new HTML-like syntax called JSX to make building dynamic components a lot easier. Pushes most of the SPA to a background worker, freeing up the UI. React includes a lightweight router and AJAX support via Flux.

The Angular2 framework also leverages the latest browser features in a very similar manner but uses ES6/ES7 syntax (ie classes and decorators) to make defining components much cleaner/easier. Angular also includes a very powerful router and AJAX support + Rx (Reactive Extensions). The problem with Angular2 is, it's still in early alpha development so no-go for use in production.

Both frameworks are transitioning over to a reusable component-service model as opposed to a model-view-controller model used in older frameworks.

Solution 2:[2]

I strongly recommend you should look for the book 'Single Page Web Applications: JavaScript end-to-end'.

When I learnt Javascript in the first place, I found achieving SPA concept without any modern framework is a very tough thing. But after buying and learning this book thoroughly, I simply use three major library(includes:TaffyDB,gevent,uriAnchor of course jQuery) to finish my first three jquery-based SPA in my first job.

These authors of the book mainly guides you how to modularize your every javascript code in a feature-based fashion. This feature-based concept is very helpful for our SPA team, since in the paste, our team spent a lot of time discussing how to avoid conflicting our variables in the same page, but when modularization, we simply use jqeuryMap.find("class selector") to narrow down the scope of module, and if ncessary, use gevent to pass the necessary object to the other module in the same page.

So, if you want to use lightweight and easy-learning jquery library in your team, refer to this book~

Single Page Web Applications

Solution 3:[3]

Try Kendo UI. It's an opensource javascript library, with a MVVM framework and routing system for Single Page Applications. Plus, it's all integrated with a component-driven ui, with a lot of very useful components.

Kendo UI

Solution 4:[4]

For LINQ Queries Check this library

https://github.com/iabdelkareem/LINQ-To-JavaScript

Solution 5:[5]

try Turbo https://turbo.hotwired.dev With Turbo, you let the server deliver HTML directly, which means all the logic for checking permissions, interacting directly with your domain model, and everything else that goes into programming an application can happen more or less exclusively within your favorite programming language. You’re no longer mirroring logic on both sides of a JSON divide. All the logic lives on the server, and the browser deals just with the final HTML.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Evan Plaice
Solution 2 mrjumpy
Solution 3 Paolo Dragone
Solution 4 Ibrahim Abdelkareem
Solution 5 odionk

Related Questions