Extending Sonar with Facebook Flux

Screen Shot 2015-12-23 at 7.52.58 PM

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.

Screen Shot 2015-12-23 at 8.19.20 PM

SQL on Node and React (SONAR)

A mobile-friendly web stack for Javascript and SQL developers
Ron Hudson  MCSD, MCDBA   (Twitter: @ronhudsonsays)



SQL on Node and React is a web stack design pattern with the distinctive characteristics described below:

  1. Separation of Concerns for Maximum Productivity – SONAR separates front-end Javascript from backend SQL applications using a “barebones” (and rarely-modified) web server written in NodeJS. Although we are Microsoft SQL Server programmers, the SONAR stack can easily adapt to any RDBMS including Oracle, Postgres, or MySQL.
  2. 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.
  3. 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.”
  4. The Javascript stack for SQL Developers – SONAR is designed for Javascript web developers who generally prefer centralized SQL code over writing object-mapping frameworks with languages like C#, Java, and PHP. SONAR also provides a starting point for implementing a FLUX dispatcher and store using SQL. If your database engine can execute OS operations (e.g. MS SQL CLR), then you can easily create a FLUX dispatcher-store platform with SONAR.

Additional goals of SONAR are as follows:

  1. 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.
  2. 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.
  3. 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.
  4. Minimize the number of programming languages required to build your web app. The key to this goal is using Node.js instead of Java, PHP, Ruby, or C#. We have found that you can’t build rich mobile web apps without strong Javascript skills. Adding a Node JS web server is trivial for any credible JS developer.

SONAR stack outline:

  1. 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.
  2. 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.
  3. 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.
  4. A different approach to team development – A key goal of SONAR is to streamline the work of building mobile web apps. Front-end skills are becoming more diverse, and it is becoming increasingly-important to have mobile Javascript expertise (e.g. layout, data-dynamic UI, vector graphics, native iOS, and Android apps).