SilverSmith: Reshaping SilverStripe Development

Posted by Aaron Carlino on 21 December 2011

If you frequent any of the usual promotional channels such as Twitter, Facebook, the SilverStripe Development mailing list, or LeftAndMain, you may have caught some buzz about SilverSmith; the elusive product from Uncle Cheese that promises to enhance development of SilverStripe projects. Though SilverSmith is not released yet, it is scheduled to be in early 2012. This post will discuss what to expect from the release and why you should care about SilverSmith.

What is SilverSmith?

SilverSmith is a visual project editor with a suite of tools that streamline SilverStripe development. Because the application is aware of the SilverStripe framework and understands SilverStripe design patterns, it can accomplish tasks much faster, more easily, and with less human error than a SilverStripe agnostic text editor.

 

 

 

 

 

 

 

 

 

The flagship feature of SilverSmith is its code generation tools, allowing a developer to loosely define the requirements of one or many page types in text format, and generate all of the necessary PHP code, database fields, and SilverStripe templates in a single click. The application also includes features to support code and templating, translations, and content, all of which will be discussed in detail later in this post.

What isn’t SilverSmith?

SilverSmith is not a replacement for traditional hand-coded SilverStripe development. It cannot and will not give you the latitude to do everything you can do in a custom coding environment such a text editor. The things that it can do, however, can be accomplished much faster and more easily than in a text editor.

Every level of developer will use SilverSmith differently. Entry-level developers or designers may rely on it exclusively to build their projects, while advanced developers may use it to jumpstart their projects before jumping in and getting their hands dirty with custom code.

Why SilverSmith?

About a year ago, my team at Bluehouse Group started researching how we could use SilverStripe to create websites for a very low cost. There was a segment of the market with small budgets that we simply could not touch unless we found a way to develop more rapidly and with more agility.

As I looked around, I found a stunning absence of third-party development tools available for SilverStripe – no TextMate bundles, no Espresso “TEA” – not even a few Coda snippets floating around somewhere.

I was inspired through my exposure to Symfony to create a project definition file based in YAML that would automate a lot of the repetitive work that went into developing a SilverStripe site, such as defining the same variables over and over again and using the same naming conventions for all my PHP classes and templates.

Meanwhile, community member and fervent Uncle Cheese supporter Marcus Dalgren and I had been in discussion for a long time about developing a code generation module for SilverStripe. We had taken note of several working examples of this feature in high-profile CMS’s such as ExpressionEngine and Harmony CMS and remarked on their appeal to designers and other non-coders. We saw it as self-evident that if we could deconstruct SilverStripe’s barrier of requisite PHP proficiency, the CMS would gain exposure to a much wider body of users.

These two endeavors were on a converging course, and met up earlier this year to form SilverSmith.

How does the code generation work?

The entire project definition is stored in a file called _project.yml. This file contains a YAML definition of all the page types and components and their associated fields and other properties. A basic site definition might look like this:

 

 

 

 

 

 

 

 

When the file is saved, the project definition is handed off to the coding tools in SilverSmith and the appropriate code is written to appropriate PHP files, which each have an area designated for SilverSmith generated code. The developer is free to modify any code outside of this area, but anything within it will be overwritten the next time SilverSmith saves the YAML.

 

 

 

 

 

 

 

So now I need to learn YAML? Why do we need another layer of code?

It is not necessary to learn YAML to use the code generation tools in SilverSmith. The application includes a WYSIWYG editor that generates YAML on the fly, much in the same way a tool like TinyMCE works. The user can use a GUI to define visually what he wants, and in the background, the YAML is being created in real time.

 

 

 

 

 

 

Some have questioned the design pattern that puts an extra layer of code between the developer and the final product. (If you include the WYSIWYG editor, there are two new layers). This is a good question and a valid criticism. I’ll do my best to explain the distinct role and purpose of each player in the code generation process, using my favorite analogy for web development.

Imagine we are a design team planning to build a large house with several rooms. In this analogy, we have the three players:

The YAML is the set of blueprints that the designer has drafted for each room. These documents tell the contractors what to build and where. They represent the medium between the designer’s vision and the installation of floorboards, ceiling tiles, and wiring, adherence to building codes, and all the other details that a building designer does not need to understand.

The visual editor is the software that the designer may have used to create the blueprints. If the designer is proficient in drafting blueprints, he may have elected to do this by hand, and save himself the trouble of learning a new tool.

The PHP is the final product – the joists, beams, pipes, and concrete that make the structure a functional building. The contractors have looked at the blueprints and interpreted them to build this house using the techniques that they see fit. A different set of contractors may use a different set of techniques to build the same concept, but the final product is always in alignment with the designer’s vision.

My philosophy professor in college once told me that analogy is the worst form of argument, so lest I’ve lost all of you in my meandering illustration, the point is this:

  • YAML represents an idea
  • PHP represents the way that the idea comes to life
  • PHP can be employed an infinite number of ways to realise the same idea

Through the YAML layer, we gain more flexibility and agility because we are free to reinterpret the same idea at any time using different coding techniques to achieve a new product that aligns with the idea.

Is SilverSmith a SilverStripe module, or is it a native OSX/Windows app?

Both.

SilverSmith is written entirely in HTML/CSS/JS. Because it uses the SilverStripe Framework as its platform, it is necessary to install it as a module on each website that will use the application. You might imagine that this will get tedious for many reasons. For one, it’s annoying to have to remember to not only install, but also maintain a copy of a module for every single site on your computer. Second, accessing a special URL for every project you want to edit creates a tab jungle in your browser.

To that end, SilverSmith will offer a licensed version that is bundled as a native OSX and Windows app that will handle all of the updates and installation automatically and work on multiple projects at once. Further, it will support native OS menus and file system management, which are beyond the capabilities of traditional web applications.

What other features can I expect from SilverSmith?

Here are the main features scheduled for the first release of SilverSmith:

Project Builder: 

 

 

 

 

 

 

 

The code generation tool that supports both visual and YAML views to create the project definition.

Code Editor:

 

 

 

 

 

 

  • Edits PHP code directly
  • Supports snippets and utilities for creating common functions
  • Checks PHP syntax before saving

Template Editor:

 

 

 

 

 

 

 

 

  • Edits SilverStripe templates directly.
  • Supports snippets and utilities for if/else blocks, control blocks, and more.
  • The “auto-populate” utility fills a template with example syntax based on all of the custom fields and relations defined in the page type.
  • A scope indicator tells the user what variables and/or controls are available based on the current position of the cursor.
  • An image browser, based on the KickAssets module allows file management and insertion of images into a template.
  • The “send to include” utility creates an include file from the selected text and replaces it with the appropriate syntax to call the include.
  • Checks SilverStripe template syntax before saving.

Template Genius:

 

 

 

 

 

 

  • Creates YAML for the project editor by “reverse engineering” the syntax of a template.
  • Allows designers to create a template without writing any PHP or YAML

Translations Editor:

 

 

 

 

 

 

 

  • Provides a GUI interface for editing translations, ported from the LangEditor module
  • Allows one-click insertions to the language file from the CodeEditor and TemplateEditor components. Just highlight text, click “translate,” and the translation tag and appropriate entry is made to the language file.

Content Editor:


 

 

 

 

 

 

 

  • Builds the architecture of your website in the site tree based on simple text input.
  • Creates new page types on the fly.
  • Inserts placeholder content using Lorem Ipsum, generic images and documents, and other randomly generated values to create a fully populated website in seconds.

Where can I learn more?

I have published multiple screencasts and updates at my blog, LeftAndMain.

You can also sign up for the SilverSmith newsletter at the official SilverSmith website, www.silversmithproject.com.

How can I become a beta tester?

Beta testers will be selected randomly, in small groups, and given specific features to test. As the early deluge of bugs becomes more manageable, larger groups will be invited until we have an RC1. If you would like to become a beta tester, I will prefer those who have donated to the project first.

Post your comment

Note: Comments are moderated and won't show until they are approved

Comments

  • Great to see the project is shaping together nicely. The interface looks very professional. I'm keen to try out the UX as part of the beta group.

    Anyone looking for the PayPal link can find it over at LeftAndMain.com

    Cheers!

    Posted by Peter Toi, 3 years ago @ptoi

  • The one who can work with something for hours, repeatedly can perform same actions and does things like actively trying to break it. The work can actually be quite monotonous and rather boring, these qualities can make a good beta tester.

    Posted by Managed Hosting, 3 years ago @sallyjacobs

  • This is brilliant. Should streamline micro-site deployment and really help lay the groundwork for enterprise-level projects.

    I'm really looking forward to this!

    Posted by Amit G, 3 years ago

  • Great to see the project is shaping together nicely. The interface looks very professional. I'm keen to try out the UX as part of the beta group.

    Anyone looking for the PayPal link can find it over at LeftAndMain.com

    Cheers!

    Posted by Peter Toi, 3 years ago @ptoi

  • looks like it's the good way to increase the production life-cycle for web agency we love using Silverstripe.

    Posted by alex, 3 years ago @galaxywatcher

  • Very nice concept. I like it. Thank you.

    Posted by Tim Jonson, 3 years ago

  • Great article! I'm very excited about this project. FYi, it appears the Paypal link is bad.

    Posted by Wilson, 3 years ago @wilsonsheldon

  • Thanks for this update – and for supporting SilverStripe in general. I'm looking so much forward to the final release.

    Posted by Joel Grøndrup, 3 years ago

  • all sounds amazing :) loving the idea of getting an app instead the first idea you had about a web service :)

    btw, the donate button is broken. it says fatal error.

    thank you both silverstripe for developing sapphire and thank you aaron for being so creative and genius with it. :)

    Posted by francisco arenas, 3 years ago @dospuntocero

RSS feed for comments on this page | RSS feed for all comments

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.