Google announced a big surprise just a few days ahead of the Google I/O Conference in San Francisco. They have launched a brand new tool called Web Starter Kit, a boilerplate with powerful tools to quickly start your web development projects.
Maybe Google wants the Google I/O attendees to familiarize themselves with the tool before the event starts. Whatever the case, the Web Starter Kit is a powerful tool packed with many modern third-party tools to help you start writing powerful code in minutes.
Google has previously released many web foundation tutorials showcasing some of the best practices in modern web development. With this release, they have given away a set of boilerplate templates and tools that focuses more on performance issues and multi-screen development. Google seems to fill the void that most of today’s front-end frameworks have long ignored — web app performance and optimization!
Web Starter Kit, though in beta, comes with features that include:
- Multi-device responsive boilerplate
- Cross-device synchronisation
- Live browser reload
- Code minification
- Built-in HTTP Server
- PageSpeed Insights
- Sass support
… and more. To make the kit work, your system should have NodeJS, Ruby, and Ruby Sass Gem installed. Installing Gulp is optional.
The kit also includes a multi-screen grid system inspired by frameworks like Bootstrap and Zurb’s Foundation. But unlike such frameworks, this kit doesn’t offer any UI elements and components. Google engineer Addy Osmani said on Hacker news that they don’t intend to compete with Bootstrap in terms of UI components.
The kit comes with two basic templates: index.html and basic.html. The first one, index.html, is the default starting point for the app. It contains responsive design and a slide-out navigation bar.
The second template, basic.html, can be used as a basic starting point with no slide-out menu. You have to replace this with index.html if you want to keep this as a starting point.
Working with Google’s Web Starter Kit becomes even easier when Gulp is integrated. All Gulp tasks are pre-configured inside the gulpfile.js file found in the root directory. Running the command gulp inside the project folder will generate a distribution-ready folder called /dist. This folder contains minified CSS, JS files, optimized images, and compressed HTML files.
Running gulp serve loads the build version of the app in the browser. It uses Live Browser Reloading to refresh the browser when you make any changes to the code.
The Gulp tool also comes pre-configured for the PageSpeed feature too. Once you have started developing applications using the kit, running gulp pagespeed will show the particular page’s performance score.
One of the best features of the Web Starter Kit is the out-of-the-box, UX Style Guide. It shows basic typography styles, font icons, and CSS classes for the grid system.
Web Starter Kit looks like a promising boilerplate starter kit for any developers of all skill levels. Checking performance, on-the-go optimization, and a responsive grid system are some of the best features it offers.
Be sure to check it out and let us know your views. Will you try Google Starter Kit in your next project?
Frequently Asked Questions about Google’s Web Starter Kit
What is Google’s Web Starter Kit?
Google’s Web Starter Kit is a comprehensive toolset for web developers. It provides a boilerplate and tooling for building, optimizing, and testing modern web applications. The kit includes a responsive boilerplate, live browser reloading, performance optimization, and a robust workflow to speed up your web development process.
How do I install Google’s Web Starter Kit?
To install Google’s Web Starter Kit, you need to have Node.js and npm (Node Package Manager) installed on your computer. Once you have these, you can clone the Web Starter Kit from the GitHub repository and then run the command ‘npm install’ to install all the necessary dependencies.
What are the main features of Google’s Web Starter Kit?
Google’s Web Starter Kit comes with several features designed to enhance your web development process. These include a responsive boilerplate, live browser reloading, performance optimization, and a robust workflow. It also includes a style guide, which provides a visual overview of the different components in your site.
How does Google’s Web Starter Kit compare to other starter kits?
Google’s Web Starter Kit stands out for its focus on performance optimization and its robust workflow. It also includes a style guide, which is not commonly found in other starter kits. However, the right starter kit for you will depend on your specific needs and preferences.
Can I use Google’s Web Starter Kit with other development tools?
Yes, Google’s Web Starter Kit is designed to be flexible and can be used alongside other development tools. For example, you can use it with CodeKit, a popular task runner, to further streamline your development process.
Is Google’s Web Starter Kit suitable for beginners?
Google’s Web Starter Kit is a powerful tool that can be beneficial for developers of all skill levels. However, beginners might find it a bit overwhelming due to its many features and the initial setup process. It’s recommended to have a basic understanding of web development and command-line tools before using the kit.
How can I contribute to Google’s Web Starter Kit?
Google’s Web Starter Kit is open-source, meaning anyone can contribute to its development. You can make contributions by submitting pull requests on the GitHub repository. Before doing so, it’s recommended to read the contribution guidelines provided by Google.
What is the purpose of the style guide in Google’s Web Starter Kit?
The style guide in Google’s Web Starter Kit provides a visual overview of the different components in your site. It helps ensure consistency in design and can be a useful reference for developers and designers alike.
How does Google’s Web Starter Kit help with performance optimization?
Google’s Web Starter Kit includes tools for performance optimization, such as image optimization and minification of CSS and JavaScript files. These tools help reduce the size of your files, resulting in faster load times for your website.
Can I use Google’s Web Starter Kit for commercial projects?
Yes, Google’s Web Starter Kit is free to use and open-source, meaning you can use it for both personal and commercial projects. However, it’s always a good idea to check the license agreement before using any open-source software in a commercial project.
Syed Fazle RahmanWeb Designer with over 6 years of experience, including user experience and front end development. Currently, CEO and Co-Founder of Hashnode, a network of software developers. Has published two books: Jump Start Bootstrap and Jump Start Foundation for SitePoint Premium.
