15 Jul 2016

Angular CLI Preview

The Angular team has announced that Angular2 is in Release Candidate status, so it’s time to get started on learning the new framework and its structure. Angular2 is quite different from Angular1.x, and the familiar JavaScript has been replaced with the newer TypeScript. Transitioning from framework to framework can be difficult enough, but when you throw in a new language, growing pains are sure to set in. However, the good news is that the Angular team has a tool to help you skip some of those growing pains and speed up development for those already in the TypeScript camp. Give a hearty welcome to the Angular CLI!

The Angular CLI is a command line tool that is built not only to help you bootstrap your project, but also to handle the build files, linting configuration, testing setup, and other boilerplate that can consume your precious development time. The CLI can help you with the following tasks:

  • Generation of a base project
  • Generation of components, services, directives and more
  • Generation of unit testing and e2e testing stub files
  • Creation of a build script
  • Serving your project with live reloading of changes
  • Linting
  • Compilation of Less, Sass, Compass and Stylus files
  • Generation of routes using lazy loading
  • Creation of production builds
  • Getting your project on GitHub
  • Plenty more. See the details on the CLI’s GitHub page.

Currently the CLI is in beta, but it is certainly ready for use and pretty well documented. The installation is simple with npm:

npm install -g angular-cli

If you are on Windows, you will likely need to run your command line as Administrator for this to succeed. You may also need to run a separate global install of the typings npm package.

Once you have installed the CLI, all you have to do to generate a project is navigate to the directory you want to create your project in via the command line and enter:


Then change into the directory the CLI just created and serve the project

ng serve

Angular CLI will compile your TypeScript, start up a web server, and possibly even open a browser tab to show your application. (Otherwise it will tell you the URL to launch) Super easy!

This generates a whole host of files for you, including the .ts file for your component, the HTML for the page and the components templates, and the CSS files for those as well. On top of everything needed to actually compile and run your project, it also has created the hooks for you to start creating tests for your application using Karma or Protractor.

If you want to use Less or Sass rather than straight up CSS, all you have to do is change the file extension of the CSS files the CLI generates for you to be .less or .sass and the ng serve command will cause those to be compiled into CSS.

The next step is to start creating some components to go in your application. Of course Angular CLI has you covered there too. Instead of having to spend time memorizing the format for a component file and debugging your typos, you can just use the CLI:

ng g component new-cmp

Or, this, if you’re not into that whole brevity thing:

ng generate component new-cmp

That again will generate all the boilerplate TypeScript, HTML, and CSS necessary to get your Angular2 component bootstrapped. It is up to you, however, to import your component in the right places where it will be used. The CLI isn’t that magic yet.

The CLI also can help you take advantage of the lazy loading by routes in Angular2. By default, when you generate a route in the CLI, it creates a route that will only load its required components when that route is activated. This saves you the upfront cost of loading components up front that a user may never visit. Of course, you may also want to load everything up front so route changes are quicker. You can of course toggle the default lazy loading off:

ng generate route my-route --lazy false

When you’re done with your coding and it’s time to build, not only can the Angular CLI handle your build process, but can even do some deploying. ng build will compile everything and move it into a dist directory. ng github-pages:deploy will create a repo for your project on GitHub and then deploy the build using GitHub pages. Granted you will have to make sure you have the tokens and ssh credentials set up for such a deployment, but the fact that Angular CLI can do all this out of the box is pretty amazing.

If you’re looking at Angular2 and wondering whether to put the effort into switching to the new framework, the Angular CLI will hopefully help you make up your mind by saving effort and keeping you from getting tripped up on typos or stuck scripting methods to serve up and compile your code. The Angular CLI is a powerful tool to help you get up and running on your way to Angular2.

Share this
18 Nov 2014

Varnish Software releases three new products to increase website scalability and performance

Released today (Nov 18, 2014) are three new products to add to the Varnish Plus application; Unlimited cache sizing, increased caching performance and customized cache optimization support content-heavy, high-traffic sites.

“For most consumers, websites are now the pivotal point of interaction with companies. If information and content isn’t delivered instantly, they will seek alternatives that are just a mouse-click away,” – Per Buer, Founder and CTO, Varnish Software.

Product details:

Unlimited cache sizing with Varnish Massive Storage Engine
The new Varnish Massive Storage Engine tackles the problems of content-heavy sites by allowing the Varnish caching layer to handle multi-terabyte data sets. This makes it possible to cache almost unlimited objects while the website performance remains stable over time. The Varnish Massive Storage Engine is targeted at business with large data sets such as online retailers, image banks, video distributors or Content Distribution Networks and enables them to deliver high quality content within their current infrastructure while pushing the bounds of modern web experience delivery.

Increased caching performance and resilience with Varnish High Availability
Varnish High Availability is a high performance content replicator that eliminates cache misses (when an item looked up in the cache is not found) and ensures the stability of the Varnish Cache set-up. By protecting the backend infrastructure from overload caused by cache misses, it increases website performance and minimizes the risk of frustrated visitors leaving websites. Varnish High Availability is for Varnish Cache users whose sites are business-critical. It can be installed with any multi-cache Varnish Cache setup, including two/three node CDN POP installations.

Customized cache optimization with Varnish Tuner
Varnish Tuner automates customized cache optimization in both the Varnish and operating system environments. It recommends configuration options for the Varnish Cache set-up including how the operating system should be tuned, which cache parameters should be changed or replaced and also explains these recommendations. Varnish Tuner makes it possible for businesses to find the specific set-ups that best matches their resources and needs, resulting in better website performance.

Varnish Massive Storage Engine, Varnish High Availability and Varnish Tuner are all available from today with a Varnish Plus subscription

Contact us today for all your Varnish purchasing/training/configuration needs!

Share this
21 Aug 2014
30 Apr 2014
11 Oct 2013
24 Apr 2012
24 Apr 2012

HTML5 Boilerplate: Making Web Development Easier

Today’s sites are infinitely more complex and I wonder how many pages could be filled writing a book that covers all aspects of modern web design and development – probably a few more than 350. In fact, we would need to add several new chapters – UX, SEO, HTML5, CSS3, frameworks, jQuery, CMS’s, browser compatibility and resets, grid systems, mobile/iPad/responsive design, and on and on!

read more
Share this

© 2019 RealEyes Media, LLC. All rights reserved.