Month: January 2020

Categories
ASP.NET CORE Azure Blazor Products Razor Pages

2020 Web Dev Learning Essentials

Below demonstrates the necessary knowledge required to become a reasonable Web Developer at 2020. This is tailored for .NET Developer.

Will update this into flow charts in the near future.

Categories
ASP.NET CORE Blazor Razor Pages

Project Setup Flow Chart

This is my typical Project Setup Flow Chart

Categories
ASP.NET CORE Blazor Razor Pages

Learning Next Steps

This is a follow up to Quick-Start, Part IV of the Series Web Development for Experienced (Non-Web) Software Engineers

Microsoft’s documentation is one of the main learning resource. Mainly due to it’s closeness to the actual source and fairly up-to-date. You can find the link here.

While ASP.NET Core’s available for several years, it continuously to evolves at an astonishing rate. Anyone who follows the preview builds might be able to understand some of the design decisions. Without them, often times it won’t make much sense. This is where I find Microsoft documentation lacking. I’ll try to provide more value discussion the changes and hidden features in this site.

Categories
ASP.NET CORE Blazor Razor Pages

Web App Differences

In Quick-start post of Web Development for Experienced (Non-Web) Engineers series, I mentioned different type of web apps. This post I’ll try to clarify what they mean.

Name App Type Description
Razor PagesWeb AppRazor Pages is closer to Model-View-Viewmodel pattern. Razor Pages is a server-side, page-centric programming model, encourages organization of files by feature, therefore easing maintenance of your application. It contains same syntax and functionalities of MVC, but enables two-way data binding and simpler development experience with isolated concerns.
MVCWeb App Model-View-Controller pattern. The Model defines the fundamental behaviors and data for the application and its components. The View uses HTML and Razor syntax to provide the UI. The Controller is a class that receives requests and handles user actions. At the time of writing .Net Core 3.1. MVC is considered as legacy.
Web APIWeb APIJust APIs
SignalRReal-Time AppWeb technologies was initially designed as pull/get protocol, where the request for the transmission of information is initiated by the receiver or client. To achieve two way communication, several techniques were used previously, such as long-poll, server-side event. With the introduction of Web Socket, two way communication is standardized (but still hard to use). SignalR is a wrapper to make development of real-time app much easier to develop.
BlazorBlazor/SPA AppThe future. Single Page Apps web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. This approach avoids interruption of the user experience between successive pages, making the application behave more like a desktop application. Several popular SPA frameworks: Angular, React, Vue. Blazor is Microsoft’s approach of making SPA, enabling C# development across web client, server, mobile.

Categories
ASP.NET CORE Razor Pages

Quick-start

Part IV of the Series Web Development for Experienced (Non-Web) Software Engineers

This tutorial shows how to use Visual Studio 19 to create and run an ASP.NET Core web app. This post might be a bit redundant consider there are so many versions of this online. For completeness sake, we have it here.

Prerequisite:

Note: This series is using Visual Studio. For tutorials using Visual Studio Code and command-line interface, you can refer to this tutorial from Microsoft

Create Web App:

At the time of the writing, ASP.NET CORE 3.1, the recommended starting point is to use a Razor Page. We’ll discuss the differences in the next tutorial. Let’s just get to building the first web app.

Open Visual Studio, click “Create a new project”

In Create New Project, Select ASP.NET Core Web Application on the left, and select ASP.NET Core Web Application, then click next.

Configure the new project by typing Project name. Where you want to store the project. And the Solution name.

Select Web Application (which will generate Razor Page template). Select “No Authentication” (which will not generate identity/user accounts). Check Configure for HTTPS (for security). Click ‘Create‘.

Your Project is Created

Run the App

Click IIS Express to run the app

Note: If there’s a popup dialog asking “Would you like to trust the IIS Express SSL certificate”, click yes.

IIS Express should run and your selected browser should open to localhost with a randomly selected port. Your Web App is running!

Note: Localhost only serves web requests from the local computer. When Visual Studio creates a web project, a random port is used for the web server.

Recap:

In this tutorial, you:

  • Create a Razor Pages web app.
  • Run the app.

Categories
Products

PC or Mac for Devs?

I believe we live in a world now that it’s no longer PC or Mac, but both. Console app, desktop app, mobile (iOS, Android), web apps (static, dynamic, SPA, PWA), games… seems options are limitless.

At high level, hardware-wise, PC is the clear winner. You can always find a suitable model at reasonable price. Mac these days are out of touch with the world with their product and price. Yes, Mac integrates well, but the right options, so can top tier Windows machines.

Since I focus on Microsoft Technologies, it makes sense to use PC. I highly recommend Surface Pro, Surface Laptop, or a good gaming desktop PC (not laptop) for development. While there’s Visual Studio Code that you can use to do .NET Core development, the experience is just that much better with Visual Studio. NOTE: I use both VS and VSCode.

BUT, we need to get a Mac as well. Main reason is the popularity of iOS. You will need a Mac to build for iOS. The other added benefit is the *nix support. This is no longer an issue as Windows as there is Windows Subsystem for Linux. Furthermore, the new Windows Terminal is just amazing.

Side note, I am omitting Linux. However, if you want to do Android platform development (not apps), you might need to get Ubuntu (which can be installed on a PC).

Categories
ASP.NET CORE Azure Products

Prerequisites

Part III of the Series Web Development for Experienced (Non-Web) Software Engineers

This post outlines the tools and services required for the series. Bold is Recommended for this series. I’ll write more later to elaborate some of the choices.

Wow, that’s a lot of downloads just to get started using one platform. Imagine how much more will need to download and update if we use different tech stack.

Categories
ASP.NET CORE Azure Blazor Products Razor Pages

Scope

Part II of the Series Web Development for Experienced (Non-Web) Software Engineers

This series is for experienced engineers who wants to understand more about web development. Here we’ll try to cover as much as possible while being cost conscious. Most importantly, still use the best tools and services that can be used in a professional and production environment.

We will cover from tools and services required. Simple architectures. Tutorials. Customization. Development Process. And actual deployment (and service customization).

We are going to be using Microsoft ASP.NET CORE and Azure as our stack. Having everything together that just works is great.

Let’s get started.

Categories
Uncategorized

Differences Between Engineers and Web Developers In Practice

Part I of the Series Web Development for Experienced (Non-Web) Software Engineers

Google Differences between Software Engineer and Web Developer, you will get plenty of search results highlighting the differences. This post is specifically for experienced Engineers trying to understand the Web Development Paradigm.

In Engineering, we start with 0 knowledge in the subject matter. We do some study. We practice. We learn the general concepts and while we practice, we gain our specialty. We focus to become an expert. We pivot and expand our knowledge domain, typical adjacent to our experience and expertise. Web Developer is fairly similar. However, there are some minor differences that I think cause significant differences:

  • General concept and knowledge are vast to grasp
  • Technology and Methodology are work in progress
  • Knowledge sharing differences: StackOverflow

Information Overload

For anyone new to web development, it’s amazing how much there is to learn. It’s a Client/Server architecture with multiple competing stacks and supporting technologies, tools, methodologies. Add the complexity of Conway’s law and aggressive history. How much does one need to learn? Where to start? It’s overwhelming!

The basic: HTML, CSS, Javascript on the client side. These are REQUIRED. You can learn the basics them here: https://www.w3schools.com/ . For advanced Javascript, I like this site: https://github.com/getify/You-Dont-Know-JS

Server side depends on the stack and supporting platform/technologies/services.

  • LAMP (Linux, Apache, MySQL, PHP)
  • Node.js
  • Django/Python
  • Windows, IIS, MSSQL, ASP.NET CORE/C#
  • …

Then, there are frameworks/libraries to build help build client side web application:

  • React
  • Angular
  • Bootstrap
  • JQuery
  • AJAX

And, endless of web services, and cloud services… So… one does not expect to know all and becomes expert in all. But we should recognize they are all trying to achieve the same thing, which is a website.

Everything is Work In Progress

Best practices today could be the worst way practice tomorrow. That’s the state of web development. There are always new trendy code, framework that some company is adopting. But the downside is that it might not get anywhere or something better came along and the mess just kept building up. That’s why I recommend people to chose a stack that is going to be supported by one of the top tier company such as Google, Microsoft, Facebook. But keep an open mind that things might change and be hungry to learn new things.

KNOWLEDGE SHARING

Web Development knowledge sharing is very active. Quality tutorials are everywhere.

If you have an issue, you can most likely find some answer online. Mind the quality of the answer might not be great. Stackoverflow is your friend.

Also, take consideration of versioning. In typical engineering, we have usually slower churn rate, usually by phases. Web development can happen as fast as 0 day with the adoption of continuous integration and deployment.

Categories
ASP.NET CORE

Web Development for Experienced (Non-Web) Software Engineers

I am an experienced Engineer. I want to see what web development is about. Where do I start?

If this crossed your mind, this series is made for you.

Table of Contents:

  1. Differences Between Engineers and Web Developers In Practice
  2. Scope
  3. Prerequisites
  4. Quick-start
  5. 2020 Web Developer Learning Essentials
  6. Customization
  7. Launch on the Web