React JS is part of Facebook’s “Flux” architecture, which was created for many of the same reasons Sonar was created. As you can see by comparing the two diagrams on this page, Sonar makes “server push” an optional flow. This is because many of the applications we build don’t need server push. However, we recently worked on a home automation application that used Firebase as the server push data source. React is designed especially for the “realtime server push” or “callback” pattern.
Ron Hudson MCSD, MCDBA (Twitter: @ronhudsonsays)
SQL on Node and React is a web stack design pattern with the distinctive characteristics described below:
- Minimal Web Server using Node JS – Our NodeJS web server does not contain UI or application-specific data/business code (including CRUD). Instead, our NodeJS server is a simple and re-usable “JSON pipeline” between AJAX clients and SQL stored procedures.
- The marriage of SQL and JSON – SQL Server handles JSON input and output using TSQL code that simply reverses JSON into relational datasets. This object-passing approach eliminates the need for multiple parameters between procedures. Every SQL procedure in the SONAR web stack can have a single and generic object parameter, making the backend 100% “polymorphic.”
Additional goals of SONAR are as follows:
- Leverage the power of relational programming (SQL) for application logic and data-driven content management. In the SONAR stack, SQL stored procedures are generally more-maintainable and extensible than “middle-tier” data mapping frameworks. With Node JS and AJAX, the “middleware” tends to become less-important to us as SQL programmers.
- Omit “business logic” from the web server, and minimize web server software updates. For example: the initial version of the Sonar.js web server handles static file service and secured database connectivity with less than 100 lines of NodeJS code. In our view, this more-cleanly defines boundaries between the AJAX client, the web backend, and the SQL service.
- We leverage Bootstrap, and ReactJS with JQuery for UI. These three libraries are now well-established as standards for data-driven UI. Angular is becoming a standard too, but we like the React model better because it’s “one-way” nature complements our other design goals.
SONAR stack outline:
- Maximum SQL Backend – Stored procedures receive sanitized JSON strings and implement SQL-based micro services for data storage and retrieval. This replaces expensive and unnecessary object-relational mapping middleware.
- Minimal NodeJS Web Server – Node and React can use JSON.stringify(object) and String.parseJSON() to serialize or deserialize any object or collection in a way that is easily converted to relational data using well-known SQL coding techniques.
- Bring your own AJAX client (BYOA) – We like React JS and the Flux concept, but you can use any UI framework you want; including Angular, native mobile clients, or server-side UI frameworks. A key goal is to make the front-end and backend data service as independent as possible.