From DevTools to debuggers, here's how to get the best from Google's tools.
Google’s Material Design was initially seen as another tiresome redesign of the GUI stack. But, as time went by, users started to embrace the typography-centric design approach. Technologies like Progressive Web Apps required the presence of a JavaScript version.
Given that JavaScript GUI stacks are pretty common, Google did not face a difficult task. The favourite way to include Material Design components involves npm. It’s not easy, though, which is why we’re starting out with a simple example.
Material Design components behave like most other JavaScript GUI stacks. Developers add widgets to the page, CSS classes ensure the decoration gets deployed. Finally, a JavaScript invocation enforces the attachment of event handlers.
02. Go full frame
Experienced developers only need one look at mdc.ripple.MDCRipple to see the source of the problem. The JavaScript and CSS files we included come out of a complex project. The sanest way involves loading the entire framework to your machine.
First of all, obtain the toolchain and deploy it into a Node project:
The actual deployment of our modules takes place via WebPack. Open Package.json and add the following markup to set up the workflow:
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
WebPack controls itself via a file called webpack.config.js. Create it in the folder containing package.json – a full installation managing all features looks like this:
WebPack transforms code by chasing it through a sequence of processors, each of which can take one or more parameters. In our case, both CSS and JavaScript items are to be processed. In theory, the WebPack stack is ready to run at this point – sadly, the compile process will fail due to missing input resources, as shown in the image above.
03. Add components
Now the main workflow is set up, we can add the individual components needed to create our app. We want to build a small resistor calculator, which requires the loading of a group of widgets:
Google ‘beautifies’ the situation by breaking the framework into hundreds of packages. In the case of our text box, for example, multiple sub-elements need to be present. Sadly, the documentation does not tell you about this (see image below).
In principle, we need one include for each component our program plans to load. As both textbox and button come with a few colleagues, we need a total of four lines worth of includes. The ripple effect used before is even more complex – we will omit it for now.
Next, touch a file named index.html. It acts as the main entry point and must load the various script files emitted by the WebPack process:
Finally, create a file called app.js. At this point, re-enter npm run to verify that the configuration still works. WebPack emits an URL similar to http://localhost:8080. The packaged results can be downloaded via a server living in npm. Don’t forget, though, to restart the server after changing files, since WebPack does not pick up changes.
05. Create widgets
Now the server is running, return to index.html and replace the Hello World message with a bit of markup:
Just like in the case of our button, a text box also consists of a group of attributes. One of them displays a hint with information about what to enter, while the other one supports animation.
However, getting animations to work requires a change in app.js:
import {MDCTextField} from '@material/
textfield';
const textField = new MDCTextField(document.
querySelector('.mdc-text-field'));
This snippet of code is interesting since it targets all three text boxes in one swipe – Google designed the API to sweep over entire CSS selectors in one go.
At this point, our program is ready to run – it will present itself like the figure. Finalising our little resistor calculator requires you to add JavaScript event listeners. After all, MDC components are but fancy HTML5 ones…
Our widgets are ready to receive input [click the icon in the top right to enlarge]
Integrating Material Design widgets into your application definitely takes a bit of work. But, the rewards are substantial and definitely worth the time. This is only the beginning. Be sure to check out the Material Design site for more tutorials, repos and information on what is available, as well as what can be done.
Material Design tools and resources
Material Theme Editor Should you find yourself working on a Mac, take Theme Editor for a spin. This small but nifty program creates customised colour palettes, which you can use to change the look and feel of various Material Design-based systems.
Icons Material Design differs from Metro in that it also allows for the use of small symbols. Google provides developers with ample choice – simply visit the URL to pick icons until your heart’s content.
Color Tool This tool allows users to create, share, and apply colour palettes to a UI. Plus, it measures the accessibility level of any colour combination that you decide to put together.
Next page: Get to grips with Progressive Web Apps
Thank you for reading 5 articles this month* Join now for unlimited access
Tam Hanna is a software consultant who specialises in the management of carrier and device manufacturer relationships, mobile application distribution and development, design and prototyping of process computers and sensors. He was a regular contributor to Web Designer magazine in previous years, and now occupies his time as the owner of Tamoggemon Software and Computer Software.
