Introducing Juice – What is it and How to Get Started

  • Wednesday, Mar 15, 2023

Whether you’re an experienced web developer or relatively new to the enthralling world of coding, the chances are that you’ve heard of the CSS incliner ‘Juice’.

null

In many ways, Juice is an advanced CSS tool that offers users a number of functions, depending on whether they want to process an online file or HTML string or link their HTML to a CSS on a hosting platform such as GitHub.

In this article, we’ll take a closer look ay Juice and why you should consider using it as a developer, while understanding how to get started!

Getting Started – What is Juice?

In technical parlance, Juice is a server-side web framework that’s built around CommonJS modules, most notably the JSGI 0.3 proposal.

Talking more broadly, this is an open-source stack and CSS incliner that was released under the MIT licensing framework, which bundles Juice with its own development server as JavaScript interpreter.

CommonJS modules were developed to bring flexibility and portability to server-side JavaScript functionality, with Juice arguably the perfect embodiment of this endeavour.

As we’ve already touched on, Juice is an advanced and popular CSS tool that has a number of additional functions built on top of its core purpose. As a result of this, Juice has considerable processing capacity, while it can also automatically get stylesheets, scripts and image data to inline successfully.

Remember, Juice can also be deployed by developers to directly link their HTML to a CSS and seamlessly organise their website elements. This benefit can be leveraged across different hosting platforms too, saving considerable amounts of time for developers and boosting highly visual applications such as design and online gambling.

Why Should You Use Juice?

Before we delve a little further into how you can get started with Juice, it’s important to explore the precise benefits of this framework and how it benefits coding enthusiasts and web developers. Here are a few advantages to keep in mind:

  1. Juice Aids the Use of JavaScript: As of 2022, 98% of the world’s 1.8 billion websites used JavaScript as a client-side programming language. Juice is now established as a common JavaScript plugin, with these two entities highly compatible the latter making JavaScript even easier and more enjoyable to use. If you’re a fan and avid user of JavaScript, there’s no doubt that Juice is a beneficial and time-saving tool that’s worth his weight in gold.
  2. There are Minimal Barriers During Usage: One of the main benefits of using Juice is that it enables JavaScript users to create client-side and server-side code in the same programming language. Because of this, your web development projects and sites won’t encounter many communication issues or gear changes, reducing the time taken to complete work and negating the risk of project delays.
  3. You Can Share Code Between the Client and Server: On a similar note, associated common helpers and validation routines only need to be written once when you develop projects that share client and server-side code. Such elements can then be used in your controllers, templates and further client-side code, but we’ll touch a little more on this in the next section of the article.

How to Get Started with Juice?

Now that you understand what Juice is and its core advantages, the next step is to learn how you can get started when deploying this framework. We’ve created a brief, step-by-step guide below:

  1. Get it Running: The first step is to download and install the latest and most up-to-date version of Juice, simply by opening a terminal and inputting the following command: ``` juice init todolist ``` This will have created a skeleton project structure in your ‘todolist’ directory. So, login to your server, and you should see the following: ``` Cd todolist./script/server ``` Here, you’ll find the new project running locally on port 3000, under the URL ‘http://localhost:3000/'. At this stage, you can begin to write relevant code and launch your development project in earnest.
  2. Get Started with the Basics: Next up, you’ll need to create a data source and prepare this for the to-do list. This will require you to open up another terminal and switch to the project directory, before you create a database shell and enter some initial data. You’ll also need a model to access and pull this data out as and when required. This can be achieved by opening up an editor and aiming it at lib/app.js in the project directory, before entering all of the requisite code and executing the final setup call. For example: ``` const SQLite3 = require( 'sqlite3' ).SQLite3; ``` ``` app.db = new SQLite3( DOC_ROOT + "db/development.sqlite3" ); ``` ``` app.models.tasks = {}; ``` ``` app.models.tasks.all = function() { ``` ``` var cursor = app.db.query( "SELECT id, description FROM task" ), ``` ``` tasks = []; ``` ``` while ( ( var row = cursor.next( true ) ) ) ``` ``` tasks.push( row ); ``` ``` return tasks; ``` ``` } ``` At this stage, you’ll also need to code a ‘controller’. This is a crucial component when using Juice, as controllers receive captures from the URL maps and subsequently return a relevant object containing data. ``` app.controllers.index = function() { ``` ``` var tasks = this.models.tasks.all(); ``` ``` return { tasks : tasks }; ``` ``` } ``` You’ll also need to associate this action and controller with a URL, and the so-called “boilerplate” scripts already afford you this default mapping so there’s no need to add this manually.
  3. Completing Tasks and Redirects: As you enter code and engage in a development program, it’s important that you’re able to mark tasks as being complete. Once again, this can be done through the lib/app.js tool and adding further functionality to the model and controller. ``` app.models.tasks.delete = function( id ) { ``` ``` var sql = "DELETE FROM task WHERE id = ?"; ``` ``` app.db.exec( sql, [ id ] ); ``` ``` } ``` This makes use of the db.exec method, which will execute the input (or statement) provided and return the exact number of rows affected. This is especially useful when working with INSERT, UPDATE and DELETE statements, while including one or more question marks into the code can also lend itself to parameter building and a potential array of replacements. ``` app.controllers.done = function( id ) { ``` ``` this.models.tasks.delete( id ); ``` ``` return {}; ``` ``` } ``` URL mappings can also help to introduce additional parameter ids, while this also makes it possible to render existing templates and redirect people from one URL to another.
  4. And Finally – Managing User Input: Last, but not least, you can use Juice to create new and additional tasks. Here’s an initial model to help you get started: ``` app.models.tasks.create = function( description ) { ``` ``` var insert = "INSERT INTO task ( description ) VALUES ( ? )"; ``` ``` app.db.exec( insert, [ description ] ); ``` ``` } ``` The key starting point here should be to determine what each new task should look like. In the example above, this includes a description that’s valid so long as it’s not empty after being trimmed. Then, you’ll have to check to see if the request was posted. If not, you can simply return the empty form, but if the request was posted, you should validate the data against the empty form. You can subsequently create the new task and redirect this to the index page. If there are validation errors or no data is posted, you’ll have to render a template accordingly. The ‘this.redirectTo = “/”’ code stashes a forwarding URL, which Juice subsequently picks up when determining whether to render redirect. ``` app.urls = { ``` ``` "/?" : "index", ``` ``` "/done/([0-9]+)" : { action : "done", redirect : "/" }, ``` ``` "/new" : "new", ``` ``` "/styles": { static: "./static/styles" }, ``` ``` "/scripts": { static: "./static/scripts" } ``` ``` } ``` You can test and try this out at http://localhost:3000/new, by entering an empty string or whitespace and have this deliver an error. If you subsequently enter text, you should be redirected to the index view and see the new item or task there.