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.
