Post Featured Image

Announcement: Introducing Denali

With the introduction of SuiteCommerce Articles we are pleased to announce the latest release of SuiteCommerce Advanced, named Denali. It represents a significant step forward in ensuring that SuiteCommerce Advanced remains a leader and vital part of the NetSuite offering.

While we have made the full release notes available, I just wanted to run through a few of the key things in this release that I'm really excited about.

New Developer Tools

This is the biggy. As a developer I expect to be able to use popular, open-source tools to do my job, which is why we've included support for the following:

  • Node – a JavaScript based application server. Its massive ecosystem of packages make it one of the most widely used JS libraries in the world.
  • Gulp – a toolkit that automates a lot of commands and tasks that a developer would typically have to do, such as combining, linting and deploying files.
  • Sass – a stylesheet language that replaces our use of LESS. Designers and developers use Sass to improve the reusability of CSS and apply a sprinkle of syntctic sugar to the styling process.

In short, we have written Gulp tasks that compile your site's JavaScript and styles and deploys them to your hosted or local sites. When you run a local server, for example, Gulp automatically starts watching your files for modifications so that when there has been changes, they are deployed to your local site automatically.

The final point worth highlighting is that you no longer need to use Eclipse as an editor. After downloading the source bundle and setting up Node and Gulp, you are free to use whatever text editor you wish to use to make your modifications and get started developing.

New Modular Design

We've revamped the architecture of the SCA modules so that they are versioned and each version contains all the files associated with that module, namely its JavaScript, Sass, templates and SuiteScript. If you want to update a module you can work directly on that module, or you can:

  1. Copy it.
  2. Change the version number.
  3. Update a configuration file to tell Gulp to deploy the new code to your site.

Doing this makes for a clean separation on old/new, or what is in production and what is in development. Reverting a change simply means changing the version number in the configuration file back to what it was.

New Handlebars Templating

Previously, we used Underscore for frontend templating. While we still use Underscore to provide a number of useful utillities, we have switched to the popular Handlebars library.

Things we like about Handlebars are:

  • It provides us with logicless templating so that HTML files are kept clean. This means that the code for getting and dealing with data is thought of separately from the presentation code.
  • The hard work of substituting in values is handled by the compiling process.
  • Good-looking templates are achievable by people of all skill levels, whether designer or developer.

We feel that learning the new templating we've introduced is important, you can read more about it here.

Mobile First and Reusable Components

With the mobile first methodology, the idea is that you start with the most important components on your site and optimize for devices with smaller screens. As the width of the screen increases, you progressively enhance the user experience to make use of the increased screen size and processing power of the user's device.

With that in mind we've also included a wide-range of Sass styles that are organized into a hierarchy with base, application-specific and template-specific styles that are used throughout the site, and a number of commonly used design components:

  • Atoms – basic building blocks. Think of things like buttons, messages and form elements.
  • Molecules – collections of atoms. Things like a date picker, search facets and modal dialogs.
  • Organisms – complex functionality comprising numerous molecules and atoms to create things like image carousels, merchandising zones and forms.

Get Started

So if you're interested in getting started you can head over to our Getting Started Developing section to learn about the new bundles, tools, architecture and modules. After that, you can read my introductory series of articles on developing your first SCA module.