In this post I will show how to build a scalable React dev environment using Bazel as the build tool.
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.
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.
In this post I will show how to create a NodeJS add-on using C++ and Bazel.
This post is a quick write-up of an experiment where I use remote execution to build my Bazel project.
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.
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.
In the following post I will show an example where I use Bazel to build an Angular application and a nodejs api.
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.
In this post I will show how to use Angular to render server side templates.
Here is an early prototype of an Angular application with lazy loading, built using Bazel and 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.
In this post I will evaluate the most common Angular bundlers to see how they compare in terms of bundle size.
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.
Today I will test if there is a noticeable change in Angular bundle size from using ESM2015 bundles vs ESM5 bundles when using Rollup.
In this post I will show how to wire up a simple implementation of a Bazel build with a “live refresh” dev server.
In this post I will take a look at the new downgradeModule in ngUpgrade.
In this post I will show how to use RxJs “lettable” operators in an Angular application.
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.
In this post I will show how to use @angular-devkit/build-optimizer to further optimize Angular Webpack builds.
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.
In this post I will show how to retry http requests using RxJs.
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.
This post is a write-up of an experiment where I measure the impact of removing whitespace from Ahead of Time Compiled (AoT) templates.
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).
In this post I will show how to avoid subscriptions in RxJs by utilizing the async pipe.
In this post I will show how to mock http requests in unit tests using HttpClient.
The goal of this post is to show how to fix a few common anti patterns I’ve seen in rxjs code.
In this post I will show how to do a simple implementation of the Merge Sort in React.
In this post I will show how I simplified the routing structure of my blog application.
In this post I will show how to create a type to search filter using React and RxJs.
In this post I will show how to use React Router 4 to add routing to a React application.
In this post I will show how to use RxJs to implement pub sub in React components.
In this post I will show how to make external API responses compatible with Closure compiled code.
In this post I will do a comparison between Webpack 3 and Webpack 2.
In this post I will show how to integrate a simple ngrx sample with the Closure compiler.
In this post I will show how to visually inspect the contents of Webpack bundles.
In this post I will show how Babili can improve dead code removal in Webpack builds.
In the following post I will show that you can shrink the footprint of your Angular Webpack build by switching to ES6 and Babili.
In this post I will talk about error handling in complex RxJs streams.
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.
In this post I want to test if there is any benefit to combining Prepack with the Closure compiler (ADVANCED_OPTIMIZATIONS).
In this post I will talk about integrating the Closure compiler with an NgUpgrade application.
In this post I will show how to optimize NgUpgrade through lazy loading.
In this post I will show a potential pitfall from combining ng-upgrade with long running intervals.
In the following post I will show how to use momentJS in a closure compiled Angular application.
In this post I will show how to use webpagetest.org to collect performance metrics for a web application.
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.
In this post I will show one of the pitfalls of bundling in Angular.
In this post I will show how I implemented the commenting feature for my blog using a microservice api.
In this post I will discuss an experiment where I set out to create the smallest Angular application possible using Angular 4-rc.5.
In this post I will do a quick comparison between the Closure Compiler and UglifyJS2.
In the following post I will show how to implement pub/sub in an NgUpgrade application.
In this post I will show how to do code splitting in Webpack.
In this post I will take a look at how Webpack handles Tree Shaking.
In this post I will talk about some of the issues with Tree Shaking of decorators.
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.
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.
In the following post I will show how to combine the Angular router with ui-router in an Ng-Upgrade application.
In this post I will show to take advantage of the Closure Compiler's comprehensive typings annotations.
In this post I will show how to combine ES2015 and CommonJS modules in the same bundle using 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.
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).
In the following post I will compare immediately-invoked function expressions (IIFE) to Universal Module Definition (UMD) bundles.
In this post I will show that putting entities in the same file does not impact Tree Shaking.
In this post I will examine how Angular applications grow in size when moving beyond the “Hello World” baseline example.
In the following post I will show how to make use of server-side rendering in Svelte.
In this post I will show how to integrate Firebase with an Angular application.
In this post I will show how to use Angular Universal with Sql Server.
In this article I will show how to create a simple chat application using Svelte and Socket.io.
In this post I will show how to add error handling when using async/await in TypeScript.
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.
In this post I will show how to simplify promise handling using async and await in TypeScript.
I have created a demo project with lots of live samples to support my articles.
In the following post I will show how to combine i18n translations with Ahead of Time Compilation (AoT).
In the following post I will show how to do code splitting with the Closure compiler.
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).
In the following post I will show how to create a recursive Treeview using Vue.
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.
In this article I will show how to use the ahead of time compiler (AOT) in Angular to improve performance.
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.
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.
In this article we will discuss how to combine socket.io with RxJs Observables in Angular.
In this article I will show how I built the commenting component for SyntaxSuccess.com using Aurelia.
I this post I will show how to use Angular Universal to generate Angular applications on the server.
RxJs is all about managing event streams. In this post we will look at buffering emitted values in an rxjs stream.
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.
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.
In this article I will show how to create a lazy loaded treeview using RxJs Observables.
In this short post I will show you how to unit test EventEmitters in Angular
In this post I will explain the purpose of the new @Input and @Output annotations in Angular.
In this article I will attempt to use the Redux pattern in an Angular component.
In this article I will show how to use dynamic forms 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.
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.
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.
In this article I will demonstrate how we can use Observables to implement a basic pub sub example.
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.
In the following article I will show how to use ComponentFactoryResolver in Angular to insert components dynamically into the DOM
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.
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.
In this article I will cover some of the details of Angular dependency injection and highlight some of the changes from Angular 1.x.
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.
In the following post I will describe how to integrate jQuery code 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.
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.
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.
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.
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.
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.
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.
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.
In this post I will give an introduction to the new Angular router.
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 introduces interfaces – a concept very familiar to developers with experience from languages like C# and Java.
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.
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.
I am continuing to experiments with Angular. In this article I will demonstrate how to create a grid component using Angular.
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.
In this post I will demonstrate how to create a simple treeview using Angular and TypeScript.
Mock Exceptions Using MOQ
Avoid Duplicate Mocking Code in Unit Tests
How to Mock HttpContext
Define Different Return Values in MOQ
How to Change Default Return Values in MOQ
In this article I will provide some details about how $q promise chaining works in Angular.
Most developers are already familiar with unit testing, but in this article I will describe a second category of automated tests – integration tests.
In this post I will show how to use Sql Server with NodeJS.
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.
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
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.
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.
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.
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.
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.
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.
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.
The purpose of this post is to demonstrate how to use RequireJS AMD in combination with regular Angular dependency injection.
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.
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.
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.
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.
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 1.3 introduced the ability to bind validation expressions using the ng-pattern directive. Here is a quick description of how to use it.
In this post I will talk about a few of the benefits of the ControllerAs syntax in Angular.
In this post I will demonstrate how to create a Treeview component using React and Flux.
In the following post I will show how to append documents to an existing array of sub documents using Mongoose and 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.
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.
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.
In the following post I will demonstrate how to conditionally render content in a React component.
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.
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.
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.
I have created two helper libraries for building xpath xpressions in c#. Here are the nuget packages to get them.
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.
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.