Top 12 Productivity Tips for WebStorm and Angular – Part 1

This article was sponsored by JetBrains. Thank you for supporting the partners who make SitePoint possible.
In this 2-part series, Google Developer Experts Jurgen Van de Moere and Todd Motto share their favorite productivity tips for developing Angular applications using WebStorm.
In this first part, Jurgen shares his personal top 5 WebStorm features that allow him to increase his productivity on a daily basis:

Use Angular CLI from within WebStorm
Navigate like a pro
Take advantage of Angular Language Service
Auto format your code
Optimize your imports

Each tip can tremendously increase your development productivity, so let’s dig into them a little deeper one by one.
Tip 1: Use Angular CLI from Within WebStorm
Angular CLI is a Command Line Interface (CLI), written and maintained by the Angular team, to help automate your development workflow. You can use it to quickly create new Angular projects and add new features such as components, services and directives to existing Angular projects.
WebStorm’s integration with Angular CLI provides you with all its power right from within WebStorm, without using the terminal.
To create a new Angular Project, choose File | New | Project and select Angular CLI.
Enter a project location and hit the Create button. WebStorm uses Angular CLI to create a new Angular project and install dependencies.
When your new Angular application is in place, you can easily add new Angular features. Right click on src/app and choose New | Angular CLI to pick the type of feature you wish to add.
Once you’ve selected a feature, you can specify the name and optional parameters, just as you would with Angular CLI on the command line:

To learn more about Angular CLI options and parameters, make sure to check out The Ultimate Angular CLI Reference.

What’s really awesome is that WebStorm automatically adds the component to the right Angular module for you, in this case AppModule.
If your application has multiple Angular modules, right click on the module you wish to add the feature to and choose New | Angular CLI. WebStorm will make sure the new files are created in the right location and that the new feature is added to the correct Angular module.
How sweet is that!
Tip 2: Navigate Like a Pro
Use cmd-click or cmd-B to easily jump to any definition within your project.
If you are a keyboard user, just put your cursor on a term and hit cmd-B. If you are a mouse user, hold down the cmd button and all terms you hover will turn into links to their definition.
WebStorm automatically recognizes Angular components and directives in your HTML, links to stylesheets, links to templates, classes, interfaces and much more.
No need to open file(s) manually, just jump to any definition you need:

When looking for a file that you don’t have an immediate reference to, hit shift twice to open the Search everywhere dialog. You don’t have to type the entire search string. If you want to open AppComponent, just type the first letter of each part — i.e. ac — and WebStorm will immediately narrow down the result list for you, so you can quickly pick the suggestion you wish to open:

Another super useful navigation shortcut is cmd-E, which presents you with a list of recently edited files so you can easily navigate back and forth between them.

Knowing how to quickly navigate to the code you need will save you a tremendous amount of time every single day.
Tip 3: Take Advantage of Angular Language Service
Angular Language Service is a service, designed by the Angular Team, to provide IDEs with error checking and type completion within Angular templates.
WebStorm integrates with Angular Language Service to better understand your code. To enable Angular Language Service, first make sure it is installed:
npm install @angular/language-service –save-dev

If you use Angular CLI to generate an Angular application, Angular Language Service is automatically installed.

Next, go to Preferences | Languages & Frameworks | TypeScript, make sure Use TypeScript Service is checked and click Configure…:

The Service Options modal will pop up. Enable Use Angular service and apply the changes:

By default, WebStorm already provides great assistance for writing Angular code.
When editing a script, WebStorm automatically imports the required JavaScript modules so you don’t have to import them manually.
If you open up the TypeScript panel, WebStorm provides you with immediate feedback on the validity of your code, so you can quickly resolve issues before having to compile your project.
Watch how the OnInit interface is automatically imported and how the live TypeScript feedback immediately tells you whether or not your TypeScript code is valid:

When you edit a template, WebStorm provides you with smart code completion that recognizes components, directives and even input and output properties:

With Angular Language Service enabled, WebStorm is able to improve code completion in template expressions:

… and report template errors more precisely right inside your editor:

Catching errors without having to compile your project saves you incredible amounts of time.
Tip 4: Auto-format Your Code
Don’t worry about formatting your code manually. WebStorm has you covered.
Whether your are in a template, a script, a stylesheet or even a JSON file, just hit cmd-option-L and WebStorm will automatically format all code for you:
Continue reading %Top 12 Productivity Tips for WebStorm and Angular – Part 1%

Link: https://www.sitepoint.com/productivity-tips-for-webstorm-and-angular-part-1/

Chasing the Holy Grail of NG Development: Angular CLI, npm Library, and Packaging

It is amazing how far we have come on the JavaScript side of the house. Creating UI richness in the browser has always been the holy grail. From Flash to Applets to old-school DHTML and outside solutions like Java Webstart, we have never been as close to that holy grail of rich desktop-like applications in the browser as we are today.
The combination of HTML 5 and Angular 2+ (NG2) has brought us closer to Avalon than ever before. Using these two recent technologies, front-end web developers have created richer desktop-like apps in recent years than any single library or technology has before. HTML 5 and NG2 development does not require a browser plugin or some other client-side binary to be installed like a Flash or Java solution and it works well across browsers and operating systems. While NG2 has a lot to offer, it also brought some complexity to the JavaScript side of the equation that was not previously as common when using good old jQuery. Not only does NG2 rely heavily on ASYNC programming but also carries with it a number of established OO Design Patterns. All of this is accomplished through TypeScript. While it is true, at the end of the day, that code in the browser is just plain old JavaScript, it is written as TypeScript and gets compiled. This provides us lots of benefits like compile-time checking of code and even some interesting performance options using NG Ahead-of-Time Compilation.

Link: https://dzone.com/articles/chasing-the-holy-grail-of-ng-development-angular-c?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

25 Programming Books for the Aspiring Developer

Whether you’re learning to code online, at a bootcamp, or in-person, there’s one supplementary resource that we recommend to accompany your learning: books. But with so many programming books to choose from (a Google search brings up over 12 million…
The post 25 Programming Books for the Aspiring Developer appeared first on Treehouse Blog.

Link: http://blog.teamtreehouse.com/25-programming-books-for-the-aspiring-developer

Learning Angular: Everything You Need to Get Started

Whether it’s AngularJS 1.X – a framework, or Angular – a platform, Google’s Angular project has taken over the web. Here’s a collection of articles, projects and courses that’ll help you get to grips with the powerful front-end tool.
But if you’re starting from scratch, and you’d like to go from zero to expert fast, a course recommendation. For expert-led online Angular training courses you can’t go past Ultimate Angular by Todd Motto. Try his courses here [ultimateangular], and use the code SITEPOINT to get 25% off and to help support SitePoint.
Introductions and Comparisons

Angular version naming got a little complicated this year, here are the official naming conventions for specific versions of the platform [angularjs], which we’ve tried to follow here and elsewhere on the site.
How to decide between React and Angular [sitepoint].

Fundamentals

How to create a single-page app with AngularJS and the WordPress REST API [sitepoint].
A guide to managing state in Angular apps with ngrx/store [sitepoint].
Managing state in Angular apps [blog.nrwl].
Persisting state in AngularJS [sitepoint].
How to build maintainable Angular apps [medium/curated-by-versett].
How to develop apps with Angular mockbackend [sitepoint].
A community-drive collection of best practices and style guidelines for AngularJS [github/mgechev].

Testing

A guide to testing your services with Angular [corinnekrych.blogspot].
How to test your Angular component [corinnekrych.blogspot].

Authentication

Angular authentication with JSON [angularjs.blogspot].
And easy Angular authentication with Auth0 [sitepoint].

Slightly More Advanced

Developing an app with Angular 2+ and the Angular CLI [sitepoint]
An anatomy of a large Angular application [medium]
Creating Progressive Web Apps with Angular [medium]
Improving Angular performance with one line of code [blog.upstate]
Building Angular apps at scale [medium]
Track device geolocation in NativeScript Angular mobile applications [thepolyglotdeveloper]
Deploy your own REST API using mLab and Heroku [sitepoint]

Projects
You’ve got the basics – and perhaps even a little bit more. Here are some projects to take on to put that knowledge into practice.
Continue reading %Learning Angular: Everything You Need to Get Started%

Link: https://www.sitepoint.com/learning-angular-everything-you-need-to-get-started/

Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS

“Eliminate render-blocking JavaScript and CSS." It’s the one Google Page Speed Insights suggestion that I always get stuck with.
When a web page is accessed, Google wants it to only load what’s useful for the initial view, and use idle time to load anything else. That way, the user can see the page as early as possible.

Link: https://dzone.com/articles/critical-css-and-webpack-automatically-minimize-re?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Ember.js: The Perfect Framework for Web Applications

Ember.js is an opinionated frontend JavaScript framework that has been getting a lot of interest lately. This article will introduce some key concepts of the framework while building a simple application with it, in order to show a basic example of what it is capable of producing.
Our example application is going to be a Dice Roller, including the ability to roll some dice and view a history of all dice rolls that have been performed to date. A fully working version of this application is available from Github
The Ember.js framework pulls together a lot of modern JavaScript concepts and technologies into one single bundle, including but not limited to:

The use of the Babel transpiler tool, to support ES2016 throughout.
Testing support at the Unit, Integration and Acceptance levels as standard, powered by Testem and QTest.
Asset building using Broccoli.js.
Support for live reloading, for shorter development cycle times.
Templating using the Handlebars markup syntax.
URL Routing first development to ensure that deep linking is fully supported throughout.
Full data layer built around JSON API, but pluggable for whatever API access you need.

In order to work with Ember.js, it is assumed that you have an up-to-date installation of Node.js and npm. If not then these can be downloaded and installed from the Node.js website.
It should also be mentioned that Ember is purely a frontend framework. It has a number of ways of interacting with the backend of your choice, but this backend is not in any way handled by Ember itself.
Introducing ember-cli
A lot of the power of Ember.js comes from its command line interface (CLI). This tool – known as ember-cli – powers much of the development lifecycle of an Ember.js application, starting from creating the application, through adding functionality into it all the way to running the test suites and starting the actual project in development mode.
Almost everything that you do whilst developing an Ember.js application will involve this tool at some level, so it is important to understand how best to use it. We will be making use of it throughout this article.
The first thing we need to do is ensure that the Ember.js CLI is correctly installed and up-to-date. This is done by installing from npm, as follows:
$ npm install -g ember-cli

and we can check it was successfully installed by running the following command:
$ ember –version
ember-cli: 2.15.0-beta.1
node: 8.2.1
os: darwin x64

Creating Your First Ember.js App
Once ember-cli is installed, you are ready to start creating your application. This is the first place we will be making use of the Ember.js CLI tool – it creates the entire application structure, setting everything up ready to run.
$ ember new dice-roller
installing app
create .editorconfig
create .ember-cli
create .eslintrc.js
create .travis.yml
create .watchmanconfig
create README.md
create app/app.js
create app/components/.gitkeep
create app/controllers/.gitkeep
create app/helpers/.gitkeep
create app/index.html
create app/models/.gitkeep
create app/resolver.js
create app/router.js
create app/routes/.gitkeep
create app/styles/app.css
create app/templates/application.hbs
create app/templates/components/.gitkeep
create config/environment.js
create config/targets.js
create ember-cli-build.js
create .gitignore
create package.json
create public/crossdomain.xml
create public/robots.txt
create testem.js
create tests/.eslintrc.js
create tests/helpers/destroy-app.js
create tests/helpers/module-for-acceptance.js
create tests/helpers/resolver.js
create tests/helpers/start-app.js
create tests/index.html
create tests/integration/.gitkeep
create tests/test-helper.js
create tests/unit/.gitkeep
create vendor/.gitkeep
NPM: Installed dependencies
Successfully initialized git.

$

This has caused an entire application to be created which is ready to run. It has even set up Git as source control to track your work.

Note: If you wish, you can disable the Git integration and you can prefer Yarn over npm. The help for the tool describes this and much more.

Now, let’s see what it looks like. Starting the Ember application for development purposes is – once again – also done using ember-cli:
$ cd dice-roller
$ ember serve
Livereload server on http://localhost:49153
‘instrument’ is imported from external module ’ember-data/-debug’ but never used
Warning: ignoring input sourcemap for vendor/ember/ember.debug.js because ENOENT: no such file or directory, open ‘/Users/coxg/source/me/writing/repos/dice-roller/tmp/source_map_concat-input_base_path-2fXNPqjl.tmp/vendor/ember/ember.debug.map’
Warning: ignoring input sourcemap for vendor/ember/ember-testing.js because ENOENT: no such file or directory, open ‘/Users/coxg/source/me/writing/repos/dice-roller/tmp/source_map_concat-input_base_path-Xwpjztar.tmp/vendor/ember/ember-testing.map’

Build successful (5835ms) – Serving on http://localhost:4200/

Slowest Nodes (totalTime => 5% ) | Total (avg)
———————————————-+———————
Babel (16) | 4625ms (289 ms)
Rollup (1) | 445ms

We are now ready to go. The application is running on http://localhost:4200, and looks like this:

It is also running a LiveReload service which automatically watches for changes to the filesystem. This means that you can have an incredibly fast turnaround time when tweaking your site design.
Let’s try it?
The initial page already tells us what to do, so let’s go and change the main page and see what happens. We’re going to change the app/templates/application.hbs file to look like the following.
This is my new application.

Note: The tag is part of how Routing works in Ember. We will cover that later on.

The first thing to notice is the output from ember-cli, which should look as follows:
file changed templates/application.hbs

Build successful (67ms) – Serving on http://localhost:4200/

Slowest Nodes (totalTime => 5% ) | Total (avg)
———————————————-+———————
SourceMapConcat: Concat: App (1) | 9ms
SourceMapConcat: Concat: Vendor /asset… (1) | 8ms
SimpleConcatConcat: Concat: Vendor Sty… (1) | 4ms
Funnel (7) | 4ms (0 ms)

This tells us that it has spotted that we changed the template and rebuilt and restarted everything. We’ve had zero involvement in that part of it.
Now let’s look at the browser. If you’ve got LiveReload installed and running you will not even have needed to refresh the browser for this to be picked up, otherwise, you will need to reload the current page.

Not very exciting, but this is with almost no effort on our part that we’ve achieved this.
In addition, we get a fully set up test suite ready to run. This is – unsurprisingly – run using the Ember tool as well, as follows:
$ ember test
⠸ Building’instrument’ is imported from external module ’ember-data/-debug’ but never used
⠴ BuildingWarning: ignoring input sourcemap for vendor/ember/ember.debug.js because ENOENT: no such file or directory, open ‘/Users/coxg/source/me/writing/repos/dice-roller/tmp/source_map_concat-input_base_path-S8aQFGaz.tmp/vendor/ember/ember.debug.map’
⠇ BuildingWarning: ignoring input sourcemap for vendor/ember/ember-testing.js because ENOENT: no such file or directory, open ‘/Users/coxg/source/me/writing/repos/dice-roller/tmp/source_map_concat-input_base_path-wO8OLEE2.tmp/vendor/ember/ember-testing.map’
cleaning up…
Built project successfully. Stored in “/Users/coxg/source/me/writing/repos/dice-roller/tmp/class-tests_dist-PUnMT5zL.tmp".
ok 1 PhantomJS 2.1 – ESLint | app: app.js
ok 2 PhantomJS 2.1 – ESLint | app: resolver.js
ok 3 PhantomJS 2.1 – ESLint | app: router.js
ok 4 PhantomJS 2.1 – ESLint | tests: helpers/destroy-app.js
ok 5 PhantomJS 2.1 – ESLint | tests: helpers/module-for-acceptance.js
ok 6 PhantomJS 2.1 – ESLint | tests: helpers/resolver.js
ok 7 PhantomJS 2.1 – ESLint | tests: helpers/start-app.js
ok 8 PhantomJS 2.1 – ESLint | tests: test-helper.js

1..8
# tests 8
# pass 8
# skip 0
# fail 0

# ok

Note that the output talks about PhantomJS. This is because there is full support for Integration tests that run in a browser, and by default, these run headless in the PhantomJS browser. There is full support for running them in other browsers if you wish, and when setting up continuous integration (CI) it is worth doing this to ensure that your application works correctly in all supported browsers.
How an Ember.js app is structured
Before we get to actually writing our application, let’s explore how it is structured on the filesystem. The ember new command above will have created a whole directory structure on your computer, with lots of different parts. Understanding all of these is important to efficiently work with the tool and create amazing projects.
Continue reading %Ember.js: The Perfect Framework for Web Applications%

Link: https://www.sitepoint.com/ember-js-perfect-framework-web-applications/

Interesting JavaScript Libraries Born in China

The JavaScript community has been growing bigger, and the language is gradually becoming the most used programming language in the world.
The community’s reach have spread to China, which has become a country to reckon with in the Information Technology industry. They have tried their hands at creating useful JavaScript libraries.

Link: https://dzone.com/articles/interesting-javascript-libraries-born-in-china?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Developing a Web Application Using Angular (Part 5)

In the previous four parts of this series, we started with a simple goal of creating a web application to view, create, update, and delete orders from our order management web service and ultimately constructed an Angular Single Page Application (SPA) that accomplished this goal. In Part 1, we developed a User Interface (UI) design and laid out our plan of action; in Part 2, we developed an architecture for our web application and implemented the resource layer; in Part 3, we implemented our service layer and solidified our abstraction of the order management web service; in Part 4, we tied the web application together by implementing the UI layer and bootstrapping the application to run in conjunction with the order management web service.
In the final part of this series, we will start both the order management web service and our newly developed web application and demonstrate some of the debugging and inspection tools that can be used to ensure that our application functions as intended. We will also explore some of the testing frameworks that can be used to automate our manual testing processes, as well as some additional features that are common among more complex web applications. Before we delve into these supplemental topics, though, we must start the web application and web service and ensure that our web application is functioning as intended.

Link: https://dzone.com/articles/developing-a-web-application-using-angular-part-5?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Simplifying Content Projection in Angular

In Angular, content projection is used to project content in a component. Let’s take a closer look at how it works:
Content projection allows you to insert a shadow DOM in your component. To put it simply, if you want to insert HTML elements or other components in a component, then you do that using the concept of content projection. In Angular, you achieve content projection using < ng-content >< /ng-content >.  You can make reusable components and scalable applications by properly using content projection.

Link: https://dzone.com/articles/simplifying-content-projection-in-angular?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev