Synth, API-First Web Framework, Confuses Community

Recently announced to Google's AngularJS meetup, Synth is an API-first web app framework built on Node.js.

The GitHub project has gone from one star to over 500 in the month and a half since it was revealed, but its creator says the wider developer community remains confused by the framework.

Synth's creator, Jon Abrams, describes the project as being a different take on traditional Node.js web frameworks, in that it is designed to make it easier to create back-end resources that can be automatically preloaded when loading AngularJS view.

The features of Synth include preload angular model data on page load, preload HTML view on page load, and a simplified project structure where front-end code is in the 'front' folder and back-end code (node code and packages) are in the 'back' folder.

Elaborating on preload, Abrams said:

Being able to automatically preload data solves the problem of a delay in seeing data when loading a particular web view.

Many people remember when Twitter first switched to a Single Page App (SPA) architecture. If you clicked a link online to a particular tweet, the page would first render, and then, after a delay, the tweet would finally appear.

If Twitter had used Synth, the tweet would appear right when the page was first rendered, since the API request to get the data wouldn't need to be requested.

The preload feature comes from adding promise support to Synth's API handling function. Since API handlers no longer need to talk to the Express response object directly, Synth re-uses API handlers. Instead of only calling them when the API is called, they are also called when a particular web view is requested. This could help reduce the high latency commonly associated with mobile web apps.

Synth also wants to make it easier to create new RESTful API resources, by creating folders and naming functions in a certain way. Synth scans the resources folder for .js (or .coffee) files, and an API is generated based on the names of the folders in which they are located. To create a memoes resource, a developer would create a folder of that same name, and then declare a request handler for a specific HTTP method in any file that is in the resources directory. This is done by assigning a function to exports.

Reactions from the developer community to Synth have been mixed. Abrams says the AngularJS community has been very positive, particularly on Twitter, however his Synth presentation recently made the front page of Hacker News and Abrams feels that some people were confused by the problems Synth aims to solve.

Panu Horsmalahti, a software designer at Cybercom Finland, commented on the naming functions:

Memorizing new naming conventions that affect functionality makes things harder instead of easier, in my experience. You can create a cool demo effect by showing how "easy" and "quick" it is to create certain stuff, but once your application scales, things become more chaotic, and maybe the convention starts to hit limitations.

In addition, it becomes more difficult to learn the code base when you have these naming conventions that create functionality all over the place.

Whenever I read "Some server specifically for some client side framework!" I can't help but feel the author has lost their mind.

The browser is just a client. All of the frameworks for the browser are just (supposed to be) abstractions for creating dynamic browser applications. If you need to create server frameworks specifically for working with a client framework that should be a sign to stop and think that something might be wrong.

I do realize the idea is crazy. I love crazy ideas. The crazier the better!

But I will disagree on the point that the browser is just a client. It can be treated like that, if you want, but you can take advantage of the fact that the client code is serveable from the same server that has access to the app's data. And that's what Synth was designed for.

Synth is still in beta and active development, and as such is not yet ready for use in production. InfoQ readers can contribute to the open source project via its GitHub project (including child projects like synth-api).

Is your profile up-to-date? Please take a moment to review and update.

Email Address

Note: If updating/changing your email, a validation request will be sent

Company name:

Keep current company name

Update Company name to:

Company role:

Keep current company role

Update company role to:

Company size:

Keep current company Size

Update company size to:

Country/Zone:

Keep current country/zone

Update country/zone to:

State/Province/Region:

Keep current state/province/region

Update state/province/region to:

Subscribe to our newsletter?

Subscribe to our industry email notices?

You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.

We notice you're using an ad blocker

We understand why you use ad blockers. However to keep InfoQ free we need your support. InfoQ will not provide your data to third parties without individual opt-in consent. We only work with advertisers relevant to our readers. Please consider whitelisting us.