Rebuilding Code Bank

Nov 24, 2013

Tags: , , ,

code viewCode Bank has been one of my most popular applications, it started as purely a desktop application and with the release of 2.0 I developed a web interface. Which is more popular I can't say because I don't have any analytics on the web interface let alone the server portion of the web client. The user interface of the web client in 2.2.x can be buggy but it does get the job done, but its not that great. Over the past several months I've gutted the entire user interface of the web client and began to re-build it on the SilverStripe 3.0 framework later upgrading to 3.1. This means a much more user friendly interface and much more secure interface. It also means it's more flexible if you have an existing SilverStripe 3.1 website you can just drop the Code Bank module in and away you go, if you do not then you can download the standalone package and you get the SilverStripe Framework with Code Bank pre-bundled.

So why move to SilverStripe as the framework? Well SilverStripe is by far one of the best Content Management Systems (in my opinion) I've worked with, and as a professional web developer I'd like to think I've crossed many CMS's in my all be it short career at Webbuilders Group (5 years for those curious). Everything from the code to the Model-View-Controller architecture, to the template system, to the CMS. Re-writing Code Bank's web client/server has been on my mind for sometime especially once SilverStripe 3.0 came out and the CMS module wasn't a required to use the SilverStripe Framework. The move to SilverStripe also dramatically improves the web client's reliability and usability. The web client is now just a section of the SilverStripe Admin, and SilverStripe provides the framework, UI tools, authentication, etc. All stuff which I previously had to design, write, maintain and secure myself. Plus, SilverStripe is open source and community maintained as well as maintained by SilverStripe Ltd out of New Zealand. What open source means for Code Bank's future, well we'll see I've been toying with the idea of open sourcing Code Bank's web client/SilverStripe module since I started the re-write of the module especially given that SilverStripe has support for Composer and were already I have a few modules and my company has a few as well. Composer makes it so much easier to install SilverStripe modules, and open sourcing Code Bank's SilverStripe module on Github would have the added bonus of other developers contributing things like translations, features and bug fixes. Oh did I mention with the move to SilverStripe the web client is now fully translatable using Ruby style YAML internationalization files, cool huh?

With the re-writing of the server side/web application side I've taken allot of feedback, feature requests and some additions I personally have been wishing for. Code Bank 3.0 has support for snippet packages, snippet folder, import from client to server and vice versa. Along with the new features I've also dramatically improved the security of the desktop client to server communications, before admin checks were very simple. Now using SilverStripe's permission architecture permission checking is done using this new framework, this means that you can now have multiple users that can access the server admin sections sections such as managing users, the intellectual property message and languages. The desktop client has seen the same features added to it as the web client though it has not seen a dramatic change in the interface. The one downside to all of this rewriting of the server side is that the desktop client is no longer compatible with pre-3.0 servers, but I think once you get using the new web client and the new features you'll forget about that.

Even the database structure of Code Bank has been completely replaced thanks to the SilverStripe ORM (Object Relationship Model), it is a little bit cleaner and a bit more organized. Rest assured though I though of all of the pre-3.0 servers out there. When you install Code Bank 3.0 as a stand alone over top of your existing server (more on this later) you walk through the SilverStripe installer just like you would if you were installing SilverStripe (its easy I promise). Once you get into the CMS (content management system) for the first time if Code Bank 3.0 detects the legacy table in the database you will be shown a message asking you to migrate your data, all you need to do is click the link in this message and sit back and relax. If all goes well just hit back in your browser and vola all of your snippets, users, etc will be migrated into the new System. If an issue pops up during the migration just look in the database the old tables are there but may have been renamed to _obsolete_*. Though there shouldn't be any problems here though it is the web so one can never be 100% sure though as a web developer I definitely do try.

"Lets get down to it, enough talking lets see the thing." Well for anyone that has seen SilverStripe 3.x before you're not going to be that surprised things look very very much SilverStripe 3.x like and that was my intention so I'm only going to show one overview of the entire deal then just show cropped shots to what is the new Code Bank. Even though I can technically re-brand SilverStripe, I chose not to, I'm not hiding it in fact I wave that flag I'm happy/proud that the new version of Code Bank is built on the powerful SilverStripe Framework. Though I did carry much of the basic interface concepts over, some have been discarded to make things much more user friendly. As for the desktop client, not much has changed there largely the changes to the desktop client are just to incorporate the new features from the web client.

Which before I get to the pretty pictures (tease tease), lets talk about the web client a bit. This could very well be the last major release of it, I know, I know, I see the torches and the pitchforks. As many existing users likely noticed in the last several updates my signing certificate is now a self signed again, why? Its expensive, like $300-500 (depending on the vendor) expensive and I'm building Code Bank partly out of my own need and partly because it seems allot of other developers find it very useful. "Well why don't you take donations or payment?" there is a couple reasons for this, the primary one and most importantly I'm doing this because I love, I'm a developer and I enjoy being one. The other part is my particular license of Flex Builder doesn't allow me to make Code Bank commercial nor do I have any desire to as Linus Torvalds said "Software is like sex, it's better when it's free" and its so true ;). To me having a donation button even if its not prominent like a few versions of Code Bank had (it was berried on the About window) it starts to push the boundaries of free. Even if this is the last major release of the desktop client, I will try to make sure that as the web version grows and evolves over time that the desktop client doesn't completely break you just may not see many more releases of the desktop client. As well if you are using the desktop client without the web client/server aspect of things you don't have to worry regardless of what happens to the web client in the future. Now if I do open source the SilverStripe module that is Code Bank 3.0, will I also open source the desktop client? Maybe, we'll see.

Picture Time! (Some adjustments could happen before release)

codebank 3 mainWelcome to the new Code Bank (notice it says SilverStripe in the top left). Code Bank its now simply a part of the SilverStripe Admin interface. I'm not going to show off the Security section, you can learn more about that here. I'm going to focus on just the Code Bank section and the features it contains and the improvements over the old Code Bank. So lets start with the basics, in the far left column you will see the main SilverStripe Admin navigation in his case this is Code Bank's stand alone build so you only see Code Bank, Security and Help as well as a link to modify your profile settings along with the logout button. The Help button is the help for SilverStripe itself it is not a help section for Code Bank and does not cover it. Security is where you manage users that have access to Code Bank, I recommend creating a separate security group for Code Bank users and only having a few administrators make sure you give the Code Bank users the "Access Code Bank" permission.

Next bar in is the main navigation panel for Code Bank, this contains things like adding snippets, searching, filtering by language, and the Snippet tree. Largely this works as anyone familiar with the desktop client or the previous versions of the web client would expect though like the rest of Code Bank it has received a face lift thanks to SilverStripe. Familiar users will also notice that you will see folders inside of languages along side the snippets themselves, these folders are brown instead of the blue of languages. As well there is a subtle new feature hidden in the tree, a context menu that provides shortcuts to things like adding snippets, folders, etc right from the context menu. The snippet tree also provides the only way to move snippets into folders from here and folders into folders.

selected snippetThe new snippet screen shows off many of the new features, including one I know allot of people including myself have wanted. Snippet Packages are a way of grouping snippets from many languages into one package. For example in the case of the snippet in the screenshot on the left it is a form field for SilverStripe in this case it is a selectable map that allows you to drop a pin on a location and get the coordinates for that location. Form fields in SilverStripe have to parts, the PHP class that defines the field and its functionality as well as the template which defines its layout both are required for this field to function properly. So I have it defined as a package, so the other developers looking at this snippet can quickly retrieve not only the PHP but the template for the field as well, and it can even be exported in one shot. This screenshot also shows the folders that can be used for organizing snippets. The new snippet details also provide some other useful features which are outside of the screenshot, the tags list now contains links to allowing you to search for snippets based on tags as well as you can now search by the creator of the snippet. As anyone who has used Code Bank before will see I have kept allot of the features that were in the previous versions for example the revisions and comparing between revisions.

The last section of the new Code Bank is the settings area, this section allows you to manage the Intellectual Property Message shown to users of both the desktop client as well as the web interface, it also provides access to adding custom languages as well as an overview for managing packages. As with prior versions of Code Bank "user languages" cannot provide a highlighter however I'm looking into tapping into SilverStripe's framework for allowing the somewhat technical among us to provide syntax highlighters for both the web interface and the desktop client, though this is still something I'm toying with so the exact implementation of this may change. The settings area is also where you will find the import from client and export to client features.

So the question everyone reading this is asking is "when is it coming out", well I'm hoping by the end of January 2014 maybe February 2014. Between now and then I'll be making a few last minute decisions including the move of the web interface to github and packagist as well as more flexibility of the user languages. Also more internal testing, lots more.

Posted in: Articles |