ASP.NET Core 2.2.0-preview1 – Web templates update

The first preview of the next minor release of ASP.NET Core and .NET Core is available from Aug 21, 2018. The new .NET Core SDK of 2.2.0-preview1 can be downloaded from here.

We need Preview of Visual Studio 2017 – 15.9 Preview 1 to work with .NET Core 2.2 projects.

Whats new in 2.2?

.NET Core listed the following features in their documentation. Now, there is no much information regarding the features in details. They will be publishing detailed information about features soon and hyperlinking that documentation in the same release page.

The new features have been discussed in the ASP.NET Community Standup call.

 

In this post, I would like to discuss updated web templates. Even though we need Visual Studio Preview to work with ASP.NET Core Projects. I have used VS Code to discuss the web templates in this post.

Current Version

Before upgrading the SDK, I wanted to check the current version of the .NET Core with the command.


dotnet --version

version

We can download the .NET Core 2.2 SDK from the link,

https://www.microsoft.com/net/download/dotnet-core/2.2

We can download and start Installation based on our system environment.

SDK

Once installed we can check whether the latest version is available or not with the same command which we have earlier in this post.

SDK2

Now, dotnet version is updated the 2.2.1 preview 🙂

Let’s create a web application

Using dotnet CLI, we can create the application from the command prompt right away. Following is the syntax to create an application


dotnet new  [--force] [-i|--install] [-lang|--language] [-n|--name] [--nuget-source] [-o|--output]
[-u|--uninstall] [Template options]
dotnet new  [-l|--list] [--type]
dotnet new [-h|--help]

 

If we have any doubts in the arguments we can use flag –help to list the available arguments to that particular command. dotnet template engine will display the commands.

For example,

dotnet new --help

The above command lists the available templates in this version

args.png

Using the help of commands, we can create n number of application with the various application with different themes.

MVC web templates

For now, let’s explore whats new in MVC and angular web templates.

To explore MVC web templates, we can go ahead and create an MVC application using dotnet CLI from the and prompt with the owing command.


dotnet new mvc

Once the command executed, the CLI will create the required files for the MVC application and it will start to restore the dependencies as the post-creation actions.

mvc

The files have been generated with the following structure,

mvc-2.png

DotNet completed optimized this folder and file structure, and they have placed an only minimal code in the starter template. The main aim of this optimization is to provide a quick starter template for the user to get started with the project.

Even though we have a separate template to create an empty project, its always good to have a very minimal set of code with some working example in the project.

So the team has provided the very small set of code in this latest version templates if the user wants to override or delete the existing pages and getting started with the new project. That can be achieved with less number of deleting the existing code.

Let’s run the application and see how the new UI has been designed with command

dotnet run

 

mvc-3

The latest UI looks so clean, there are no such components – Jumbotron in the first half of page, 4 or 5 pages with user login feature. We are having only 2-page links here.

And as you see there is a default option to place the cookie accept policy details. Once the user clicks the Accept button, the message gets hidden and a flag is getting added in the browser cache. Until the user clears the browser for this particular web page, the message won’t show to the user again. That’s a helpful feature IMHO.

We 2 links called page 1, page 2 here, but those are not working in this preview release. In the standup call, the team provided the news that it will be fixed in the main release. And the team is looking for the feedback from the community to improve the templates.

I think we should add sidebar as an optional flag, we can let the user decide whether they need it or not. We don’t have to put it in the default templates page.

 

Angular web templates

Now, let’s explore the angular application web template.

We can follow the same approach

dotnet new angular
dotnet run

 

The angular web templates come up with following folder structure

spa.png

When we run the latest angular application template, we have got following UI pages,

angularangular1angular2

In the Home page, we have information about the single page application on what are all the UI framework and technology used in the application like –

In the counter page, we have a button and counter whenever we click the button the counter provides the number of clicks information.

In the Fetch date page, we have a table with bootstrap styles.

 

Bootstrap is fine here, but I wish the angular material design should get included as an optional flag. It will be great if have the material design support in the dotnet CLI itself.

That’s for now, thanks for reading.

Happy Coding!

 

TypeScript – Quick view – Pt. 1

What is TypeScript?

  • TypeScript is a syntactic sugar for JavaScript.
  • TypeScript syntax is a superset of ES5 & ES6 syntax.
  • Every valid JavaScript code is also a TypeScript code.
The TypeScript compiler emits JavaScript. The TypeScript compiler performs only file-local transformations on TypeScript programs and does not re-order variables declared in TypeScript. This leads to JavaScript output that closely matches the TypeScript input.
TypeScript does not transform variable names, making tractable the direct debugging of emitted JavaScript. TypeScript optionally provides source maps, enabling source-level debugging. TypeScript tools typically emit JavaScript upon file save, preserving the test, edit, refresh cycle commonly used in JavaScript development.
It can improve your productivity by enabling rich tooling experience. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS. 

Why TypeScript?

JavaScript is standardized through the ECMAScript standards. TypeScript supports most of the latest ECMAScript features (the various posts under ECMAScript can be found here). Some of the interesting features of latest ECMAScript like modules, lambda functions, classes, the spread operator, destructuring, template literals are supported in TypeScript.

TypeScript makes JavaScript more and reliable by having following features

  • Optional static typing
  • Supports the latest JavaScript features
  • Supports classes, interfaces, generics
  • More productive than JavaScript

Optional static typing

JavaScript is dynamic type, it does not know type of variable until we initialize it. Typescript provides types support to code. Using static typing we can define the data type of the variable.

var x : string = "Make a smile";

Here we have declared a variable of type string. The popular data types available in TypeScript are Boolean, Number, String, Array, Tuple, Enum, Any, and etc.

We have mentioned TypeScript is optional static typing.

What does it mean?

It means, we don’t have to mention the exact type of variable always. If we don’t wish to mention the type of variable, we can user any type to declare the variables. Once we are initializing the any type variable, it will decide the type of variable based on the values.

example:

var y: any = “Clear Screen”;

Supports the latest JavaScript features

Most features of ECMAScript has been supported by TypeScript.

The latest features of ECMAScript like

are supported in TypeScript as well. We can discuss about those topics in upcoming blog posts.

More productive than JavaScript

If the developer is already familiar with any of the Object Oriented Programming, it will be easy for them to adopt to TypeScript. The syntax are similar to Object Oriented language like C#.

As C# developer, in my personal experience I felt learning and understanding the syntax of TypeScript is easy.

IDEs can help you throwing error right away when you are coding itself. So you can focus more on coding and less time at debugging. Enhanced IDEs provides greater support to this language which provides significant productivity compared working with JavaScript.

 

This is just an introductory post, we can discuss more topics under TypeScript in upcoming posts. Please share your thoughts in comments section and follow this site for more updates.

 

Happy Coding!