Wintellect Blogs

Yes, I Used jQuery in My Angular2 Application

Dave Baskin

24 Apr , 2016  

ScreenShot

An astute observer has probably noticed that I’m using jQuery in my Angular2 example application.

“The horror! Revoke his Angular2 license now!!”

I’m in no way saying this is a best practice or even a good practice. Including jQuery is not required or even desirable for most Angular2 applications. Angular1 had a dependency on jQuery or its own jQuery-lite version, but for Angular2 this is no longer the case.

jQuery will also cause problems for other scenarios, like pre-rendering the Angular2 application on the server or in a web worker, because jQuery components are expecting to work with the physical DOM. Plus it weights your application down with additional dependencies that will cause the application to load more slowly for a user.

But using jQuery was practical for this situation and gives me the chance to demonstrate how Angular2 can interoperate with existing web technologies. Let’s take a step back and look why jQuery might be worth considering in certain scenarios.

User Interface Widgets

There’s been much discussion about creating general purpose user interface components (commonly called “widgets”). Think of widgets as resuable pieces of user interface that can help you to build your application, for example, a progress bar, a dynamic and sortable table view, menu bars, charts and graphs, etc.… Read more

, , ,

Wintellect Blogs

Container and Presentation Components in Angular2

Dave Baskin

18 Apr , 2016  

ScreenShot

Angular2 has a strong emphasis on components. An application is made up of a tree of components, starting from the root component and working down to child components. This helps to organize your application into logical and manageable pieces. Complex user interface can be broken down into smaller components, assembling them together, to better organize your application’s functionality and how it is presented to the user.

Components can be further categorized. Some components are just simple user interface components, for example like a date-picker widget or a simple user information card. These components are used throughout your application, but they don’t exercise your application logic. That work is delegated to other parts of the application. These components might be called “Presentation” (or “Dumb”) components.

Other components serve to organize and orchestrate the activities of child components and application services. These components know about the application logic. They might push application data down to child components and respond to events emitted by them. They might transform an event into a transition to a new application state. These components might be called “Container” (or “Smart”) components.

Example Application Components

Let’s look at how some of the components in the example application are organized.… Read more

, , ,

Wintellect Blogs

Big Ideas Behind Angular2

Dave Baskin

12 Apr , 2016  

ScreenShot

When I first started using AngularJS (way back in version 0.8, I believe), I was continually impressed at what it could do. The team I was working with at the time had many discussions on how this young framework could be used effectively within our project. We found ourselves experimenting with different techniques and slowly figuring out what patterns worked best. We were rewarded with many “Aha!!” moments that showed us how much insight went into the framework.

As you probably already know, there’s a new version of AngularJS that is close to being released. The Angular team basically took a step back and considered all the things they learned building Angular1, many ideas and techniques that came about as browser technology matured, and advances to Javascript itself (ES2015 and TypeScript), and rewrote the framework to be a better platform for creating modern web applications.

I’ve spent some time working with the new Angular2 framework and now have a better sense of how it is used. I think the Angular team has done a great job of improving the framework.

I’ve built an example application to manage a list of images. It’s not a full featured application, but I wanted to build something that had a reasonably complex user interface and also incorporated routes and UI controls (and wasn’t a To-Do application).… Read more

, ,

Wintellect Blogs

FastFileFinder Now 30 Percent Faster—How Fast Can You Make It?

John Robbins

21 Feb , 2016  

image

A while ago I whipped up a small utility to search for filenames at the command line. I noticed recently that it did not handle long filenames over 260 (MAX_PATH) characters. Having a few spare minutes I updated FastFileFinder to use the Win32 API directly as the .NET Framework Directory methods do not have that support. Additionally, I took at idea from Josh Carroll and batched up the matching filename output to minimize the calls to Console.WriteLine.

With that little bit of work FastFileFinder is now 30%-50% faster! I haven’t looked too much harder but I think there’s some more speed up work that can be done. Are you up for the challenge? How much faster can you make it go?

Grab the code here: https://github.com/Wintellect/FastFileFinder
Grab the compiled binary here: https://github.com/Wintellect/FastFileFinder/releases/tag/v2.0Read more

,

Wintellect Blogs

A Quick Look at F# In Visual Studio Code

Jonathan Wood

8 Dec , 2015  

shutterstock_197284118

It’s F# Advent time again! This is a yearly event the F# community comes together for the month of December and each person releases an F# related post on a day of their choosing. Today is that day for me this year.

With the recent announcement at Microsoft’s Connect() conference, Visual Studio Code now has an awesome update that can install extensions. With me being an F# fanatic I got excited to see that actually using F# is one of the first extensions available via Ionide which is originally made for developing in F# in GitHub’s Atom client.

While you could technically already “use” F# in Visual Studio Code, it was only for syntax highlighting. You couldn’t run any of the code. This quick post will help show you the steps to started developing F# within Visual Studio code.

The original creator of Ionide, Krzysztof Cieślak, did a great guest post for the .NET Blog to help announce F# support for VS Code. I figured I’d do my best to extend on it with this post.

Installing the F# Extensions

If you’re used to Atom or Sublime you’re already familiar with the command palette in Visual Studio Code (scroll down to the Command Pallete section).… Read more

, ,

Wintellect Blogs

WintellectPowerShell Now on the PowerShell Gallery

John Robbins

7 Nov , 2015  

powershell

Getting and installing modules is easier than ever with the PowerShell Gallery and PowerShellGet. Instead of downloading and extracting files into your PowerShell modules directory, a simple call to Install-Module takes care of everything for you. Today I’ve published my WintellectPowerShell module. Now you can install and get started setting up Visual Studio to access symbol server, source servers, and many other cmdlets for debugging support. All you need to do with PowerShell 5.0 (or by adding the Package Management Preview to PowerShell versions 3 or 4) is issue the following command:

  1. Install-Module -Name WintellectPowerShell -Scope CurrentUser

 

If you haven’t heard of WintellectPowerShell, here are all the commands it offers.

TOPIC
about_WintellectPowerShell

SHORT DESCRIPTION
Provides cmdlets for setting up symbol servers and other
functionality related to debugging and performance tuning.

LONG DESCRIPTION
This module makes setting up symbol servers and source server debugging
functionality easier to control for Visual Studio 2010 through 2015
and WinDBG. Setting up a development machine for symbol server
access is more difficult than it needs to be but no more.

You can have any combination of Visual Studio 2010 through 2015, and
WinDBG on the computer for these cmdlets to work.

These cmdlets had been originally developed as PowerShell scripts by John
Robbins and released on his blog.

Read more

, ,

How To,Wintellect Blogs

First Impressions of the Xamarin Inspector

Jonathan Wood

6 Nov , 2015  

Searching concept.

One of the pain points of using Xamarin Forms is that, just to see updates of any UI updates via XAML, you still need to save your changes, recompile, and relaunch the application. What’s more, is that you’d have to do this on each platform you’re targeting to make sure the UI looks good on each of them.

Well, the awesome folks at Xamarin know this and they’ve just released a preview edition of their newest application – Xamarin Inspector. I’ve played around with it a bit and below are my first impressions of the new application.

Take note that, in the time of this writing, the Xamarin Inspector is currently in early preview. More up-to-date information can be found on Xamarin’s documentation page.

When playing with the Xamarin Inspector I decided to use the demo project that we used for our post a while ago on testing Xamarin applications with F# and FsUnit. I felt this application gave a minimal amount of UI just to see what the Inspector could show.

How to Launch the Inspector

Since the Inspector is currently in preview, you would need to update your Xamarin Studio, in the Xamarin Studio -> Check for Updates screen to access the Alpha channel of the updates, like below.… Read more

, ,

Wintellect Blogs

Automating Xamarin Builds with FAKE – Part 3: Building and Running Unit Tests

Jonathan Wood

4 Nov , 2015  

testautomation

While this will be a short post it’s also one that may be one of the most important ones to go over – running unit tests. Most of you probably know that being able to run tests early and often can save a ton of time if issues are found later on. One way to do this is to be able to execute your tests as easy as possible and this is possible within your FAKE script. Once again, FAKE comes with functions to be able to execute our tests in any framework you may be using.

Building the Unit Test Project

Of course, before running our tests we need to build the project. As we’ve seen in the previous posts, we’ll build the project with the MsBuild function.

let testProj = !! "FakeDemo.UnitTests/FakeDemo.UnitTests.csproj"

Target "Build-UnitTests" (fun _ ->
    testProj
        |> MSBuild "FakeDemo.UnitTests\bin\Debug" "Build" [ ("Configuration", "Debug"); ("Platform", "Any CPU") ]
        |> Log "---Unit Test build output----"
)

Executing Unit Tests

Now here is another cool thing I really like from FAKE – they include helper functions that execute the tests for us. All we need to do is to pass in some configuration and we’re good to go!… Read more

, , ,

Wintellect Blogs

Linking Property Change Notifications in Xamarin Forms (or WPF/Silverlight)

Keith Rome

17 Oct , 2015  

Links

I’d like to share a really awesome bit of code that I’ve been using in my XAML applications for a while now… there are many frameworks and examples out there, but I’ve not yet seen anyone else using this exact technique before…

MVVM in XAML UI Applications

If you are building app UIs using XAML, then you are more likely than not also using the MVVM design pattern. The general idea is that your code which handles application logic, business rules, etc. gets placed into ViewModel classes, and all visual widgets/controls get placed into XAML views. Typically we would have one View per ViewModel, but that’s not a requirement at all (more like a generalized observation), and in fact there are some situations where we might want to have multiple Views for the same ViewModel (or break a complex ViewModel into multiple parts while still connecting to a single View). The ViewModels are supposed to capable of standing alone, and we use data bindings and command bindings to connect the two. This way, we can unit test our ViewModels thoroughly, and (sometimes) allow UX designers to dictate the XAML layout directly.

That’s all fairly normal and typical.

As we dig a little more deeply into the mechanisms of data binding, we learn that part of the “magic” is achieved by way of the INotifyPropertyChanged interface (which includes only one thing – an event named PropertyChanged).… Read more

, , , ,