WebAssembly with Bazel

In this article I will show how to use Bazel as the single build tool for a Javascript application with C++ WebAssembly.

Added Closure Compiler Support to Svelte Prod Bundling Rule

The latest addition to my experimental Svelte Bazel rules is optional opt-in to advanced Closure compiler optimizations in the bundle_prod rule. This means you have a choice between Rollup and the Closure compiler when generating prod bundles using bundle_prod.

Svelte with Snowpack and Closure Compiler

This short post shows a simple example of how to integrate the Closure compiler with Snowpack to create an optimized Svelte production build.

lit-html with the Closure Compiler

In this post I show how to combine lit-html with the Closure compiler to get smaller, more performant JavaScript bundles.

Optimizing Svelte Applications

In this post I take a closer look at performance optimizations from using the Closure compiler to bundle Svelte applications.

The Closure Compiler and Svelte

This article is a summary of a poc I ran this weekend where I used the Closure compiler to bundle a medium sized Svelte application.

Streaming MessagePack API with Svelte and Asp .Net Core

In this article I will show how to use MessagePack to stream binary responses to a Svelte application from a .Net Core backend.

Undoing Changes in Git

In this post I will show a few examples of how you can use Git to undo mistakes in your code base.

Multi Threading with WebAssembly

In this post I will show an example of how to use threading with WebAssembly.

Developing Svelte with DotNet

In this short post I will show how to serve a Svelte application from a .Net Core backend.

Incremental Integration Testing with Bazel

In this article I will show how to optimize integration testing by running tests incrementally. My example is using .Net Core with Bazel, but the concepts discussed in this article are language agnostic.

Sharing Complex Types Between C++ WebAssembly and JavaScript

One of the challenges when integrating C++ WASM with JavaScript is dealing with complex types in method arguments and return types. In this article I will show an experimental solution where I use MessagePack to serialize objects between C++ and JavaScript.

Using WebAssembly with Web Components

This weekend I looked into integrating WebAssembly in web components. This post is a write-up of what I learned.

SignalR with Angular and Dotnet Core

In this post I will show how to use SignalR in an Angular project with an asp.net core backend.

Creating a Reverse Proxy in Dotnet Core

After hearing about Project YARP, an initiative from Microsoft to create a super fast .Net reverse proxy, I decided to give it a try in one of my private projects. This is a write up of what I learned.

Experimenting with Rust and WebAssembly

Today I decided to run a quick experiment with Rust and WebAssembly. Here is a write up of what I learned.

Building DotNet Core and Angular with Bazel

In this post I will show how to create a unified Bazel build for an asp.net core backend and an Angular frontend. I will be using the latest versions of both Angular and Asp.net core.

Optimizing Blazor Applications

The following post is a write up of my attempt to optimize a Blazor client side application.

Using the Closure Compiler with Bazel

In this post I will show how to build a JavaScript application using Bazel and the Closure compiler.

Large React Production Bazel Build

In this post I will show an example of a large React Bazel build consisting of more than 8000 components and service files. The sample uses Bazel to create a Rollup production bundle from this relatively large set of files.

Self Hosting Azure Functions in Kubernetes

In this article I will show how to self host Azure functions in a Kubernetes cluster.

Scaling Queue Triggered Azure Functions

Last weekend I spent some time playing with queue driven Azure functions to learn more about how serverless functions scale under load. This post is a write up of some of my findings.

Building a Scalable API Gateway

In this post I will discuss how to use Azure API Management to build a scalable and cost effective API gateway.

Exposing Multiple Public Microservices in Kubernetes

In this post I will show how to expose multiple microservices from a Kubernetes cluster. This specific example uses Asp.Net Core microservices, but the approach will work for any microservice technology.

Microservices in Kubernetes

In this post I will show how to deploy microservices to Kubernetes. My example will show how to deploy a microservice with a public IP in front of an internal service with a cluster scoped IP.

Building DotNet Core with Bazel

It’s still a bit too early to use the .Net Bazel rules in a real enterprise project, but it’s at least possible to start doing some small POCs. In this article I will show how I built a .Net Core RabbitMQ queue producer/consumer using a Bazel setup.

Deploying Kubernetes with Zero Downtime

In this post I will show how to configure Kubernetes to avoid downtime during pod deployments. In my example I will be using an Asp.Net Core microservice deployed to a Kubernetes cluster running in Azure, but the ideas discussed here are not tech or cloud provider specific.

Asp.Net Core and gRPC

In this post I will show how I created a gRPC based api using Asp.Net Core.

Serverless Azure Functions

In this post I will show how to create a serverless Azure function.

Dockerizing an Asp.Net Core Microservice Behind Nginx

In this post I will show how to dockerize an Asp.Net microservice and host it behind an nginx reverse proxy.

Server Side Rendering

In this post I will explain how I enabled server side rendering for my blog.

Server Side Blazor

In this post I do a quick comparison between client side Blazor and server side Blazor.

Experimenting with Blazor

This post is a quick write-up of a POC I worked on this weekend using .Net Blazor.

The Architecture of My Blog

I just realized the other day that my blog is in its fifth year now. Since the application is built from scratch, I figured it would be fun to do a write-up of the architecture behind my blog.

Combining C++ with JavaScript

I this post I will show how to use web assembly to integrate C++ code in a Javascript application.

Svelte Bazel Seed

I have created a seed application for people who are interested in exploring Bazel as the single build tool for Svelte applications.

Remote Build Execution with Bazel and Svelte

This post is a quick write-up of a poc on remote Bazel builds of Svelte code.

Svelte Bazel Build

This post is a writeup of a POC I did with Bazel and Svelte. The Bazel rules are still considered experimental, but I have a working Bazel build with Svelte compilation and Rollup bundling.

Building DotNet with Bazel

In this article I will show a simple example of how to build a simple C# self hosted web api using Bazel.

Remote Bazel Builds with BuildFarm

Lately I’ve run some experiments with remote Bazel builds of Angular and React applications. This post is a write-up of my results so far.

Scalable React Build with Bazel

In this post I will show how to build a scalable React dev environment using Bazel as the build tool.

Full Stack Development with React and Bazel

I have created a simple demo where I show how to use Bazel to build a full stack application written in React and Java. This is just a simple POC, but it illustrates the concept of using Bazel as the single build tool in a mixed programming language envrionment.

Language Neutral Types With Bazel

In this post I will show how to use Bazel with Protocol buffers to share types between Typescript, Java and C++ in the same application.

Creating Node Addons with C++ and Bazel

In this post I will show how to create a NodeJS add-on using C++ and Bazel.

Bazel Remote Execution

This post is a quick write-up of an experiment where I use remote execution to build my Bazel project.

Bazel and Remote Caching

Lately I have spent some time playing with remote caching of Bazel build artifacts. I am still exploring this, but here is a quick summary of what I’ve learned so far.

Bazel with Angular, Node and Java

In a previous post I showed how build an Angular app and a Node api with Bazel. In this post I will take this a step further by throwing a Java Api into the mix.

Building Angular and Node with Bazel

In the following post I will show an example where I use Bazel to build an Angular application and a nodejs api.

Using TypeScript With NodeJs

Lately I have started to combine Typescript more and more with nodejs coding. In this post I will show how to incorporate Typescript into a nodemon based workflow.

Angular Server Side Templates in Express

In this post I will show how to use Angular to render server side templates.

Angular Lazy Loading with Bazel and Rollup

Here is an early prototype of an Angular application with lazy loading, built using Bazel and Rollup.

Lazy Loading With Rollup

Rollup is currently working on support for code splitting. In this post I will use this new, experimental, feature to bundle a mid size Angular application.

Comparing Angular Bundlers

In this post I will evaluate the most common Angular bundlers to see how they compare in terms of bundle size.

Webpack vs ParcelJS

In my demo project I have examples of how to bundle Angular applications with pretty much any bundler under the sun. Today I added Parcel to the collection. Let’s see how it compares to one of my existing Webpack configurations.

Bundle Angular ESM2015 With Rollup

Today I will test if there is a noticeable change in Angular bundle size from using ESM2015 bundles vs ESM5 bundles when using Rollup.

Angular Bazel Build with Dev Server

In this post I will show how to wire up a simple implementation of a Bazel build with a “live refresh” dev server.

Angular NgUpgrade With DowngradeModule

In this post I will take a look at the new downgradeModule in ngUpgrade.

Lettable Operators in RxJs

In this post I will show how to use RxJs “lettable” operators in an Angular application.

Building Angular Applications with Bazel

This weekend I decided to experiment with using Bazel as the build tool for a simple Angular application. This post is a quick write-up of my learnings so far.

Angular Build Optimizer

In this post I will show how to use @angular-devkit/build-optimizer to further optimize Angular Webpack builds.

Unit Testing RxJs Retries

In a previous article I showed how to add conditional retry logic to RxJs based http requests. In the following post I will show how to unit test the retry logic.

Retrying Http Requests With RxJs

In this post I will show how to retry http requests using RxJs.

Angular AoT In Watch Mode

One of the really cool things in Angular 5 is watch mode for the ngc (AoT) compiler. In this post I will look at how this works.

Removing Whitespace in Angular Templates

This post is a write-up of an experiment where I measure the impact of removing whitespace from Ahead of Time Compiled (AoT) templates.

RxJs Subjects Emit Synchronous Values

Working with subjects usually involves “next-ing” out values that subscribers can subscribe to. In this post I will show that the “next-ed” values are received synchronously by the subscriber(s).

How to Subscribe Less in RxJs

In this post I will show how to avoid subscriptions in RxJs by utilizing the async pipe.

Mocking Http Request with HttpClient in Angular

In this post I will show how to mock http requests in unit tests using HttpClient.

Fixing RxJs Anti Patterns

The goal of this post is to show how to fix a few common anti patterns I’ve seen in rxjs code.

Merge Sort in React

In this post I will show how to do a simple implementation of the Merge Sort in React.

Express Router

In this post I will show how I simplified the routing structure of my blog application.

Creating a Search Filter in React and RxJs

In this post I will show how to create a type to search filter using React and RxJs.

Routing with React Router 4

In this post I will show how to use React Router 4 to add routing to a React application.

Pub Sub with RxJs in React

In this post I will show how to use RxJs to implement pub sub in React components.

Using Service Workers

In this post I take a look at service workers in JavaScript. I will show how to use a service worker to support offline loading of an Angular application.

Closure Compiler and Http Requests

In this post I will show how to make external API responses compatible with Closure compiled code.

Webpack 3 vs Webpack 2

In this post I will do a comparison between Webpack 3 and Webpack 2.

Integrating NgRx with the Closure Compiler

In this post I will show how to integrate a simple ngrx sample with the Closure compiler.

Inspecting Webpack Bundles

In this post I will show how to visually inspect the contents of Webpack bundles.

Webpack Tree Shaking with Babili

In this post I will show how Babili can improve dead code removal in Webpack builds.

Angular Build with Webpack and Babili

In the following post I will show that you can shrink the footprint of your Angular Webpack build by switching to ES6 and Babili.

Error Handling in RxJs

In this post I will talk about error handling in complex RxJs streams.

Angular Production Builds

In this article I will discuss some of the alternatives for preparing an Angular application for production. I will look at several different approaches, and highlight the pros and cons.

Combining Prepack and Closure Compiler

In this post I want to test if there is any benefit to combining Prepack with the Closure compiler (ADVANCED_OPTIMIZATIONS).

NgUpgrade with Closure Compiler

In this post I will talk about integrating the Closure compiler with an NgUpgrade application.

NgUpgrade with Lazy Loading

In this post I will show how to optimize NgUpgrade through lazy loading.

NgUpgrade and long running intervals

In this post I will show a potential pitfall from combining ng-upgrade with long running intervals.

Using MomentJs with Angular and the Closure compiler

In the following post I will show how to use momentJS in a closure compiled Angular application.

Measuring JavaScript performance – Closure Compiler vs Webpack

In this post I will show how to use webpagetest.org to collect performance metrics for a web application.

Closure Compiler vs Rollup vs Webpack

I have migrated my demo application to use the Closure compiler for bundling. In this post I will do a quick comparison of bundle sizes between Closure, Rollup and Webpack.

Pitfalls in Angular bundling

In this post I will show one of the pitfalls of bundling in Angular.

Creating a microservice in NodeJs

In this post I will show how I implemented the commenting feature for my blog using a microservice api.

Minimal Angular Application

In this post I will discuss an experiment where I set out to create the smallest Angular application possible using Angular 4-rc.5.

Closure Compiler vs UglifyJS

In this post I will do a quick comparison between the Closure Compiler and UglifyJS2.

JavaScript AST

In this post I will discuss JavaScript ASTs and show how you can easily generate an AST of your code using Rollup.

NgUpgrade Pub Sub in Angular

In the following post I will show how to implement pub/sub in an NgUpgrade application.

Code Splitting in Webpack

In this post I will show how to do code splitting in Webpack.

Tree Shaking with Webpack

In this post I will take a look at how Webpack handles Tree Shaking.

Tree Shaking Decorators in Angular

In this post I will talk about some of the issues with Tree Shaking of decorators.

Angular bundling formats

I just updated my Angular samples to version 4 of Angular. Since version 2 the Angular team has made a few tweaks to the Angular distribution format. In this post I will point out a few of the differences.

How To Create A Tech Blog

Blogging is one of my favorite hobbies. In this post I want to share some info about how I built up my blog. Hopefully this will be helpful to other bloggers, but I am also looking for feedback and suggestions for improvement.

NgUpgrade with the Angular router and ui-router

In the following post I will show how to combine the Angular router with ui-router in an Ng-Upgrade application.

Closure Compiler and Types

In this post I will show to take advantage of the Closure Compiler's comprehensive typings annotations.

Combining ES2015 modules and CommonJS modules using the Closure Compiler

In this post I will show how to combine ES2015 and CommonJS modules in the same bundle using the Closure Compiler.

Migrating my Angular demo to use the Closure compiler

Now that the Closure compiler is closer to becoming a viable option in Angular, I have decided to start migrating my Angular demo components to use it. I will give you updates on my progress as I continue to work on the migration.

Angular application bundles

In this post I will discuss different ways to generate Angular application bundles. I will show examples using Rollup, Webpack and the Closure compiler (ADVANCED_OPTIMIZATION).

IIFE vs UMD

In the following post I will compare immediately-invoked function expressions (IIFE) to Universal Module Definition (UMD) bundles.

Tree Shaking ES2015 modules

In this post I will show that putting entities in the same file does not impact Tree Shaking.

Size of Angular applications

In this post I will examine how Angular applications grow in size when moving beyond the “Hello World” baseline example.

Server-side Svelte

In the following post I will show how to make use of server-side rendering in Svelte.

Optimizing applications using Svelte

I believe build-time compilers will play a much more important role in JavaScript development in the coming years. I this post I will show how I reduced the payload size of my blog commenting feature from over 100k to 4.7k by switching to the compiler based framework Svelte.

Using Firebase with Angular

In this post I will show how to integrate Firebase with an Angular application.

Using Angular Universal with Sql Server

In this post I will show how to use Angular Universal with Sql Server.

Using Svelte with Socket.io

In this article I will show how to create a simple chat application using Svelte and Socket.io.

Async Await Error handling

In this post I will show how to add error handling when using async/await in TypeScript.

Where is promise.finally?

At this point I've used so many different promise libraries that I've lost track of what's supported natively by ES6 promises. Today I learned that “finally” is not yet part of the standard even though it's commonly implemented by third party promise libraries. In this post I will show how to simulate “finally” while we wait for the standard to hopefully implement it.

Async and Await in TypeScript

In this post I will show how to simplify promise handling using async and await in TypeScript.

Angular examples

I have created a demo project with lots of live samples to support my articles.

i18n and Ahead of Time Compilation (AoT) in Angular

In the following post I will show how to combine i18n translations with Ahead of Time Compilation (AoT).

Lazy Loading with the Closure Compiler

In the following post I will show how to do code splitting with the Closure compiler.

Using the Closure Compiler - ADVANCED_OPTIMIZATIONS

The Closure compiler is an amazing tool for optimizing JavaScript. In this post I will show how to use it in some common scenarios. For the purposes of this post I will be using the closure compiler with ADVANCED_OPTIMIZATIONS.

Creating a Treeview in Svelte

In the following post I will show how to create a treeview using Svelte. I will also compile the treeview with the closure compiler (ADVANCED_OPTIMIZATION).

Creating a Treeview in Vue

In the following post I will show how to create a recursive Treeview using Vue.

Tree Shaking in JavaScript

In this post I will talk about how to apply Tree Shaking to JavaScript code.

Optimizing NgUpgrade bundle sizes in Angular

Many existing Angular 1 projects are looking to NgUpgrade to help with the transition to post 1.x versions of Angular. In this post I will show how to create an optimized Angular bundle for the NgUpgrade scenario.

Ahead of Time Compilation in Angular

In this article I will show how to use the ahead of time compiler (AOT) in Angular to improve performance.

Using NativeScript with Angular

Angular code is decoupled from the underlying runtime environment, so in theory our code could run on any type of host. In this post we will show how to use NativeScript in combination with Angular to create a native app.

web workers in angular

One really cool thing about Angular is that the framework is decoupled from the DOM via a higher level API. In the following post I will show how to take advantage of this by running an Angular application in a web worker.

Socket.io with RxJs in Angular

In this article we will discuss how to combine socket.io with RxJs Observables in Angular.

Comment component in Aurelia

In this article I will show how I built the commenting component for SyntaxSuccess.com using Aurelia.

Server Side Rendering in Angular

I this post I will show how to use Angular Universal to generate Angular applications on the server.

Buffering with RxJs in Angular

RxJs is all about managing event streams. In this post we will look at buffering emitted values in an rxjs stream.

Caching with RxJs Observables in Angular

Caching is important for performance, especially on bandwidth restricted devices and slow networks. In this article we will discuss how to cache http calls using rxjs observables.

Combining multiple RxJs streams in Angular

In RxJs we often deal with multiple streams, but the end consumer typically only subscribes to a single stream. In this article we will look at ways to combine multiple streams into a single stream.

Lazy Loaded TreeView in Angular

In this article I will show how to create a lazy loaded treeview using RxJs Observables.

Unit Testing EventEmitter in Angular

In this short post I will show you how to unit test EventEmitters in Angular

Input and Output in Angular

In this post I will explain the purpose of the new @Input and @Output annotations in Angular.

Redux in Angular

In this article I will attempt to use the Redux pattern in an Angular component.

Dynamic Form in Angular

In this article I will show how to use dynamic forms in Angular.

Change Detection in Angular

One of the most common criticisms of Angular 1.x is the potentially inefficient change detection algorithm tied to the digest cycle. In this post I will discuss some of the major improvements to change detection in Angular.

Angular Unit Testing

The new component based architecture in Angular is great for unit testing, so in the following article I will demonstrate how to unit test Angular 2.0 code using Jasmine and TypeScript.

Observables in Angular

The RxJs community has presented the idea that any series of events can be modeled as one or many asynchronous or synchronous arrays. In the following post I want to explore this by modeling a series of different user inputs as Observables.

Pub Sub in Angular

In this article I will demonstrate how we can use Observables to implement a basic pub sub example.

Save Navigation Operator in Angular

Angular is now a lot less forgiving about undefined references in binding expressions than Angular 1.x is. In this post I will show how to use the safe navigation operator to safe guard against undefined references in view templates.

Loading Components Dynamically in Angular

In the following article I will show how to use ComponentFactoryResolver in Angular to insert components dynamically into the DOM

Forms and Validation in Angular

In the following post I will show how to use the built in form functionality in Angular. Through an example I will wire up some common controls and show how to do data binding and validation in the form.

Web workers in Angular 2.0

One really cool thing about Angular 2.0 is that the framework is decoupled from the DOM via a higher level API. In the following post I will show how to take advantage of this by running my application using multiple web workers.

Dependency Injection in Angular

In this article I will cover some of the details of Angular dependency injection and highlight some of the changes from Angular 1.x.

Input controls in Angular

Capturing user input is an important part of web development, so in the following post I will demonstrate how to use common input controls like textbox, checkbox and radio button in Angular.

Using jQuery with Angular

In the following post I will describe how to integrate jQuery code with Angular.

Integrating React with Angular

I am continuing my Angular article series and today I want to show you how to integrate non Angular code in Angular. Specifically I will be integrating an existing React/Flux component with an Angular host component.

Angular 2.0 vs Aurelia

Lately I have spent quite a bit of time working in both Angular 2.0 and Aurelia, so I figured I'd share some of my experiences here.

Timeouts in Angular

Most Angular developers are probably already familiar with the $timeout service. This service serves an important role in Angular 1.x, so today I decided to go digging for its counterpart in the new Angular world.

Is Angular 2.0 worth it

I have over the past months spent quite a bit of time working with Angular 2.0 by writing sample components and going through the Angular 2.0 source code. At this point I have decided to write down some of my thoughts around my experiences with Angular 2.0. Keep in mind, these are just my own personal experiences, so I am very interested in hearing from other developers who might have totally different views on this.

Virtualized spreadsheet component in Angular

I am continuing my series of POC components using Angular. Today I have decided to create a virtualized spreadsheet component. The idea is to make a highly scalable grid by limiting the number of rendered DOM rows to a fixed number – backed by a virtual data source. The point of all this is not really to recreate Excel, but to play around with some new Angular concepts.

Comprehensive guide to Unit Testing in AngularJS

Angular allows you to build amazing user interfaces, but as complexity increases, unit testing becomes a very important part of your project. In this article I will provide a comprehensive guide for how to successfully write unit tests in AngularJS. The examples are created using Jasmine, but the concepts are not directly tied to a specific testing framework.

Angular promises – then vs success

The Angular team has just announced that the convenience wrappers success and error for promise handling have been deprecated. This is not surprising as the success/error API is not only non standard, but might also lead to unexpected results. In this post I will highlight some of the potential pitfalls from using success.

Angular and Http

Being able to make http requests is a very important part of a single page application. In this post I will show a quick demo of how to make requests using the Angular http module.

Routing in Angular

In this post I will give an introduction to the new Angular router.

Visual Studio Code

Microsoft has open sourced their entire .Net platform. This is huge since it opens up the .Net framework to a lot of new users who were previously blocked by the “Windows only” policy. As part of this effort Microsoft also released a new editor called Visual Studio Code. In this post I will summarize some of my experiences from taking the new editor for a quick spin.

TypeScript and implicit interfaces

TypeScript introduces interfaces – a concept very familiar to developers with experience from languages like C# and Java.

Ignoring Angular bindings

Angular includes a directive that tells Angular to not compile or evaluate bindings in the contents of a specified DOM element. In this simple example I will demo how to wire this up.

Core Directives in Angular 2.0

In Angular 2.0 – core directives are not automatically available in your templates. Instead you have to opt in to the directives you plan to use in your components. In cases where you need several it may seem a bit tedious to list out every single one. In the following post I will show how to include all core directives using the predefined 'CORE_DIRECTIVES' constant.

Experiences with Angular

Angular is probably still the undisputed heavy weight champion of JavaScript frameworks, but other frameworks are emerging as solid alternatives. In this post I will share some of my experiences from working with Angular on large enterprise projects.

Unit Testable Code with MVVM

Angular Grid

I am continuing to experiments with Angular. In this article I will demonstrate how to create a grid component using Angular.

Angular input values and binding

In this post I am continuing my series of Angular articles by showing how to set up two way binding between input elements and model.

Recursive TreeView in Angular

In this post I will demonstrate how to create a simple treeview using Angular and TypeScript.

Object.defineProperty explained

JavaScript lacks explicit access modifiers, so variable “privacy” is hard to come by :-) . Instead we have to come up with clever workarounds to encapsulate objects to simulate the type of private scope we are used to from other programming languages. In this post I will demonstrate how to use Object.defineProperty to lock down JavaScript properties.

Mock Exceptions Using MOQ

Mock Exceptions Using MOQ

Avoid Duplicate Mocking Code in Unit Tests

Avoid Duplicate Mocking Code in Unit Tests

How to Mock HttpContext

How to Mock HttpContext

Define Different Return Values in MOQ

Define Different Return Values in MOQ

How to Change Default Return Values in MOQ

How to Change Default Return Values in MOQ

JavaScript variable assignment explained

Variable assignment is a concept that many developers find confusing. In this post I will try to explain how JavaScript treats variable assignments and argument passing.

Angular promise chaining explained

In this article I will provide some details about how $q promise chaining works in Angular.

Angular integration tests

Most developers are already familiar with unit testing, but in this article I will describe a second category of automated tests – integration tests.

Using Sql Server from NodeJS

In this post I will show how to use Sql Server with NodeJS.

How to mock http calls in Angular

For better testability, and other important reasons, it's generally advisable to add some form of abstraction around your http access layer. However, Angular offers its own “hook” for mocking if your code under test has a direct dependency on the $http service. In this post I will show how to tap into Angular's httpBackend service to define mocked responses to http requests.

How to inject Angular dependencies in Jasmine unit tests

Angular dependency injection is very flexible and easy to work with, but how do you inject dependencies in Jasmine tests. In the following short post I will show two common approaches

How to mock providers in Angular

Providers in Angular serve as a way to create independent components that can be injected into other components. There are several different variations on providers; service, factory, value, constant and provider, but the idea is very similar between all of them. In this post I will demonstrate how to mock the different types through Angular dependency injection.

How to unit test Angular run blocks

Run blocks in Angular are commonly used to bootstrap the application and run initial setup functions. In some cases the logic might be complex enough to warrant unit tests, so in the following post, I will demonstrate how to capture run block(s) from a unit test.

How to simulate and test failing promises in Angular

Whenever you make an asynchronous remote call there is always the chance that the call will fail. In this post I will demonstrate how to simulate and test failing promises when using Angular and $q.

How to mock promise based service dependencies in Angular

In this article I will show how to unit test an angular service by mocking its external dependency. The service under test is trivial, but the key point is to demonstrate how to mock its asynchronous dependencies using Angular and Jasmine.

How to Mock with NSubstitute

There are several great mocking frameworks available for .Net, but <a href='http://nsubstitute.github.io/' target='_blank'>NSubstitute</a> stands out because of its simple and elegant syntax. Perhaps the biggest benefit is how easy it is to integrate mocked objects with the code under test. There is no need for framework specific bootstrapping, or extra properties to access the objects you are mocking.

How to Create Xpath Using Linq

As an alternative to my previous xpath library, XpathItUp, I've created a lambda based framework for generating xpath expressions. The goal is to improve and address some of the short comings of my previous library.

JavaScript ES6 Linq

EcmaScript 6 offers some new really nice syntax additions to JavaScript. One of them is arrow functions. Arrow functions provide a compact way to create filter functions, so to take advantage of this I have created a lightweight library for querying arrays using ES6 arrow functions.

Angular with RequireJS AMD and ocLazyLoad

In a previous post I showed how to combine RequireJS AMD with regular Angular DI. In this post I will demonstrate how to enhance this further by adding ocLazyLoad to support true on demand lazy loading of resources.

Angular with RequireJS AMD

The purpose of this post is to demonstrate how to use RequireJS AMD in combination with regular Angular dependency injection.

JavaScript and bind

One confusing thing about JavaScript is how the meaning of 'this' changes based on execution context. In this post I will demonstrate how to use bind() to inject the meaning of 'this' in functions where it's referenced directly.

Getting started with React Native

In a previous post I showed how to use React to create both client side and server side web components. In this post I will demonstrate how to use React Native to create an IOS application.

Writing Jasmine unit tests in ES6

Previously I showed how to write application code using ES6, but wouldn't it be nice to use ES6 when writing unit tests as well? In the following post I will demonstrate how to write Jasmine tests using ES6 syntax.

Including EcmaScript 6 code in Angular 1.x

Despite lack of browser support, ES6 is beginning to leave its mark on modern web development. We still have to transpile ES6 code down to ES5, but improvements in transpilers and automation make the process almost seamless. In this post I will demonstrate how to benefit from ES6 JavaScript in Angular 1.x.

Aurelia Treeview on GitHub

I have added a cleaned up version of my Aurelia treeview project to Github and here is a quick tutorial showing you how to use it.

Building a Treeview in Aurelia

I have started exploring Aurelia and figured building a treeview would be a good way to learn more about the framework. The following post is a write up of how I built my treeview.

Unit Testing bindToController and ControllerAs

The bindToController property makes it really easy to tie a directive's isolate scope to the controller when using controllerAs. BindToConroller effectively binds the scope properties to the controller, but how can we simulate this in a unit test without having to include the directive in the test? In this post I will show an example of how to do it.

Angular - binding validation expressions to ng-pattern

Angular 1.3 introduced the ability to bind validation expressions using the ng-pattern directive. Here is a quick description of how to use it.

Angular and benefits of ControllerAs syntax

In this post I will talk about a few of the benefits of the ControllerAs syntax in Angular.

Converting React jsx files using Webpack

In this post I will demonstrate how to use Webpack to bundle React jsx files into regular JavaScript code.

Creating a Treeview using React and Flux

In this post I will demonstrate how to create a Treeview component using React and Flux.

Appending to child collection in MongoDB

In the following post I will show how to append documents to an existing array of sub documents using Mongoose and MongoDB.

Sorting by ObjectId in MongoDB

It's common practice in databases to keep a column or field to indicate when a record or document was created. This is useful for audit purposes, but also for sorting. You can add add your own audit fields, but in MongoDB we get a timestamp for free if we define our primary key as an ObjectId. This is because the 12 byte ObjectId type contains a 4 byte time component. In this post I will show how to add simple sorting to a Mongoose query based on the timestamp component of ObjectId.

Object models and inheritance in TypeScript

Proper object modeling is becoming more important in JavaScript development as client side features are growing in complexity. Most object models don't require inheritance, but for those that do, JavaScript is lacking proper/intuitive constructs to support it natively. True, it is possible to inherit objects in JavaScript through the prototype chain, but it still leaves a lot to be desired compared to languages where object oriented code is more of a first class citizen. In this post I have added an example of how to bring more streamlined inheritance to JavaScript through TypeScript.

Caching promises in Angular

Caching typically translates into an instant performance win in most applications. In this post I will demonstrate how to add basic cache handling to promise based http calls.

React components - server side and client side

One of the great things about React is the ability to easily share components between server and browser. In the following post I will demonstrate how to run the same exact React component server side and client side. The server used in this example is NodeJS/Express.

Decoupled object models in React

A common criticism of React seems to be that it's tearing down the barrier between view and object model - better known as separation of concerns. Some are even claiming that React is taking us back in time by reintroducing anti patterns from the past where Html and JavaScript were tightly coupled and intertwined like spaghetti. I find this view to be misguided, and will through a simple example, demonstrate how to integrate decoupled object models in React.

Hiding and showing elements in React

In the following post I will demonstrate how to conditionally render content in a React component.

JavaScript websites and SEO

Modern websites make heavy use of JavaScript to support a better user experience, but what is the impact on SEO?

Angular vs React

Lately there has been a lot of buzz about React. People are already comparing it to Angular – another very popular framework. In this post I will look at some of the differences between React and Angular.

JavaScript and its crutches

There is a growing sentiment among developers that the community is saturated with frameworks that all promise to fix “JavaScript problems”. Some are just frustrated with the high number of frameworks available, but there is also the DIY crowd that opposes any form of JavaScript frameworks. I personally fall somewhere in the middle since I would love for JavaScript to be natively “self-sufficient”, but the current state of the language is just not there yet.

Decoupled object models in JavaScript

I have always advocated in favor of decoupled object models for testability and flexibility, but what does that really mean? In this post I will, through an example, demonstrate what I mean by a decoupled object model and highlight the major benefits of the approach.

Is jQuery still relevant

As so many other developers I got my first introduction to complex client side web applications through jQuery. It was essentially the gateway drug that got most developers hooked on JavaScript during a time when JavaScript played a relatively modest role in most web projects. I will always be grateful for the productivity boost I got from adding jQuery to my, back then, very limited repertoire of client side skills. However, as project requirements got more and more complicated, developers started to realize that the traditional jQuery pattern of very little separation between object model and markup was not scalable. I think this and a few other factors beg the question, is jQuery still relevant today?

Which JavaScript framework do I choose

Since JavaScript has made a big comeback as one of the most sought after skills in the job market, there has been a lot of talk about which frameworks to focus on. Developers have several frameworks to choose from today; Angular, Ember, Knockout, Durandal, React and the list goes on.... Granted some of these are not in direct competition since they serve different purposes, but they all deserve to be on the list of notable frameworks in today's market. In this post I will talk about why I don't think it really matters which one you end up going with.

Exciting new features in ECMAScript 6

JavaScript is everywhere these days! Both front end and the back end can be written in JavaScript, and in fact, this blog is an example of an application written entirely in JavaScript. Even though JavaScript has been around for a long time it's definitely a language in constant transition. The next really exciting milestone will be ECMAScript 6, which will usher in a whole host of new exciting additions to the language. In this post I will write about a few of the changes that excite me the most.

Thoughts on Angular 2.0

A while back the Angular team made an announcement about their plans for the next generation of Angular – Angular 2.0. The presentation revealed changes that represent a big departure from the current 1.x version. Developers everywhere responded with a mixture of shock and disbelief after learning that core concepts of Angular 1.x would be dropped in 2.0. In fact it almost seemed as if the team had decided to create a brand new framework, but still name it Angular for brand recognition. However, in this post I want to explain why I think the new Angular approach is the right one.

Nuget packages

I have created two helper libraries for building xpath xpressions in c#. Here are the nuget packages to get them.

Integrating React components in Angular

React has emerged as a popular library for creating complicated user interfaces, most notably Facebook and Instagram. React is great for building reusable components and one of its strengths is how easily it integrates with other frameworks. In this post I will demonstrate how to integrate a simple React component in an existing Angular application.

Removing watches in AngularJS applications

Angular is a great framework for composing complicated data driven user interfaces. Most of the time Angular does a good job of balancing flexibility and performance, but in large complicated UIs, performance may become an issue if you're not careful. In this post I will discuss some effective techniques that may help you tune your application.