-
Notifications
You must be signed in to change notification settings - Fork 28
Bedrock tech
Bedrock is a collection of various technologies that allow us to quickly prototype projects without too much fuss. The core technologies and high-level architecture are outlined below.
A Bedrock project primarily consists of two directories: core and content. Content is where any project-specific files live, such as SCSS files, templates and JS. core is part of the Bedrock 'framework' (if you could call it that) and should not be modified in a project. Changes to Bedrock should always happen within the mono-company/bedrock repository (i.e. this one). These changes are then pulled to a project using the Bedrock CLI ($ bedrock upgrade), or copied manually.
In the past, we went for a rather simplistic solution where all Jade templates were compiled on any template changes. However, this solution did not scale very well: projects with many templates files would take several seconds to compile, resulting in a rather long wait until the browser reloaded automatically. Having to wait several seconds before seeing your results in the browser is obviously very undesirable, and we had to look for a different solution.
Bedrock currently runs two servers — the first one is an Express server that is responsible for serving all static files, as well as compile the Jade template that is currently being requested. This allows us to compile and serve the template we're currently interested in, rather than compiling the whole thing. The other server is a BrowserSync server, and is the server that we actually use to preview the project in the browser. This server proxies all requests to the Express server while adding live-reloading functionality, creating a very short feedback loop.
Bedrock allows the user to use icons in two different ways (that can be used alongside each other if needed).
The default option is to inline SVG icons using the icon mixin provided in the Bedrock core. It's easiest to include this mixin once in your top layout so you can use it throughout the project without having to include the mixin on every page. The SVG files should be stored in content/icons — the mixin will use this directory to resolve the path of the file to render it properly. For example, +icon('danger') will look for a file in the path content/icons/danger.svg. The mixin has a second parameter to optionally include any extra classes.
The second option is to use fontcustom to compile an icon font. This is explained in the README fairly well — just be aware that this can be a pain to get working cross-platform (because of all its dependencies) and that it sometimes works kind of janky. Use at your own risk!
JavaScript is compiled with Browserify and includes a Babel transform for transpiling ES2015 code to ES5. Browserify uses the CommonJS module system, so nothing is global by default.
Bedrock uses Gulp as its build system. All SCSS and JS files are compiled through the use of Gulp plugins. There are also a myriad of tasks to help compile a 'ready-to-serve' project that can be hosted anywhere (i.e. a bunch of HTML, CSS and JS files).