Embed JavaScript into an Express/Jade-driven App, Page 2
Embedding JavaScript
You'll almost certainly want to embed client-side JavaScript into an Express/Jade-driven application, and in doing so, pass variables from your Express application into the JavaScript. I had a bit of trouble figuring this out when first starting out with Express and Jade, and so wanted to provide an example for others potentially experiencing similar issues. All that is required is for you to properly indent the code below the script
declaration. For instance, I use the following snippet within an Express-driven Web application which incorporates the Google Maps API:
script
var latlng = new google.maps.LatLng(#{latitude}, #{longitude});
var myOptions = {
zoom: 15,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var markerPoint = new google.maps.LatLng(#{latitude}, #{longitude});
var marker = new google.maps.Marker({
position: markerPoint,
map: map,
title: "#{name}"
});
Introducing Stylus CSS Preprocessor
With Jade so adeptly handling the HTML-related responsibilities, it's time to introduce some CSS into the project. But given the fantastically structured environment Jade brings to the table, it would be a real shame to resort to old school style sheets. Enter Stylus, a CSS preprocessor sporting a syntax similar to Jade, and additionally a number of impressive features which greatly enhance CSS maintainability.
link(rel='stylesheet', href='/stylesheets/style.css')
Rendered to the browser, this line produces:
<link rel="stylesheet" href="/stylesheets/style.css"/>
This should look quite familiar to any developer with even a rudimentary understanding of CSS. But it's here where the similarities begin to tail off. Navigate to the application's /public/stylesheets
directory and you'll find two files: style.css
and style.styl
. Open the style.css
file and you'll find typical CSS syntax:
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00b7ff;
}
This CSS is generated by Stylus by way of the styles.styl
file! Open the styles.styl
file and you'll see the following code:
body
padding: 50px
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
a
color: #00B7FF
Notice how the Stylus syntax eschews brackets in favor of indentation, and does away with semicolons altogether? This is just a small sampling of the succinctness Stylus has to offer. For instance, one of my favorite features is the ability to use variables within the .styl
file. Modify styles.styl
to look like this:
link-color = #00B7FF
body
padding: 50px
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
a
color: link-color
In this example, I've created a variable named link-color
, and later used that variable within the a
declaration's color
attribute! This feature gives you the opportunity to manage all values which are potentially used within multiple locations of your style sheet. Simply reloading the application within your browser will cause the styles.css
file to be updated.
Conditional Statements within CSS
Another great Stylus feature is the ability to use conditional statements within the style sheet. For instance, suppose you were in the midst of developing a new website and wanted an easy way to debug your style sheet. Using Stylus, you can create a variable named for instance debug
, and then check that value throughout the stylesheet in order to set certain properties accordingly:
debug = true
...
if debug
div
border 1px solid black
These two features alone are enough to make the case for adopting Stylus for a future project, and I've hardly scratched the surface! Be sure to check out the Stylus documentation for a complete list of examples.
Conclusion
Are you using Jade or Stylus in a current project? Tell us about your experiences in the comments!
About the Author
Jason Gilmore is founder of the publishing, training, and consulting firm WJGilmore.com. He is the author of several popular books, including "Easy PHP Websites with the Zend Framework", "Easy PayPal with PHP", and "Beginning PHP and MySQL, Fourth Edition". Follow him on Twitter at @wjgilmore.
Originally published on https://www.developer.com.
Page 2 of 2