Sorted By: Tag (web)

React with Redux: A Stable, Powerful and Scalable Combination - Part 1

React and Redux has been my go-to UI tools for a while now and I wanted share the fundemental benefits of adopting this type of architecture on your web applications. This is the first part of the blog post series I will publish on this.
2016-10-22 14:25
Tugberk Ugurlu


For the last a few months, I have been using React and Redux. I successfully converted a small application from Aurelia to React + Redux combination. Actually, it's a lie that that application is small. I told you it's small because it was less than halfway done at the time I started converting. That Web application is meant to be complex and has complicated data needs. Besides that application, we started building a completely new web application on top of React and Redux: SQL Clone Web Client. We haven’t shıpped ıt yet but we are approaching there.

This is an interesting move from someone like me who hated and thought React was bad.

However, I must admit that it was a premature thinking. I had my reasons but those reasons blocked me to look further to see the actual benefıt and power of React. In this post, I am going to hopefully answers the "why" question behind React and I will take it further to mix it with Redux.

I also suggest you to have a look at the short video of Cory House answering the "Why React" question.

React

If you don't know already, React is a library from Facebook to help you create user interfaces. It's important to make the distinction here that React is not a framework like Angular or Aurelia. You can see React as the V in MVC. However, this doesn't mean that you cannot create full-blown applications with React. There are a few other tiny libraries which you can plug into React like react-router, react-redux and they close the React's gap to build scalable Web applications.

React takes a declarative and component based approach on creating user interfaces. For example, the below is the well-known "Hello World" example of React:

var HelloMessage = React.createClass({
  render: function() {
      return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<HelloMessage name="John" />, mountNode);

mountNode is just an element here which you can get a hold of through document.getElementById or similar APIs to that.

This will print "Hello John" inside the mountNode. At this point, it's OK to be puzzled with all the buzz about React because this is not something which blows your mind and if you are seeing this for the first, it's also OK to go "WTAF" here because you have something HTML{ish} inside your JavaScript code. This is neither HTML nor part of Javascript. That is JSX and it needs transpiling. As stated, you go "WTF" over this (well, at least I did) because it might go against the "separation of concerns" thinking you have been holding onto. I have been there and done this. I stopped looking at React at that point and convinced myself that it's not something that would scale in terms of maintenance.

Do you have the same reaction? If so, let me tell something which I wish someone would told me when I had this reaction and I think deserves to be emphasized over and over again. The above "Hello World" example is not the place where you should start learning React. It should be "Thinking in React" documentation that you should start with. It's such a good documentation explaining what the mindset you should be in while you are working with React. However, you might be dealing with another challenge in our mind now while this direction can put you into a different situation:

This kind of has a point. I believe the amount of boilerplate code which you write with React to get your application running is higher than any of its opponents. However, small applications is probably not going to highlight the value of React that well. You see the value it brings when you think in terms of the whole application. Let me tell you a few things about this.

To me, most valuable thing about an evolvable application (doesn't have to be a web application, any sort of it) is to be able to reason about its behaviour at any point during its evolution. Whenever, you see some unexpected behaviour, you should able to say "this is happening because this part in my application is doing something wrong". This is also valid for expected behaviours as well as you will be contributing to its evaluation by adding new features to it and you should know exactly where you need to apply the changes to add those features.

The other point I want to make here is based on amazing Brian Holt's talk at Dev Day: "React: Learn Once Write Anywhere". If my memory is not failing me, he stated a very important fact about a React application: its constant complexity level. I accept that a typical React application starts complex but that complexity mostly stays the same during the entire evolution of the web application unless you go outside the boundaries of the structure. However, if you go with a simple approach at the begging, your complexity will grow as you grow your web application codebase. I have witnessed this several times and I will tell you that it’s not fun to apply changes after a certain point.

If you are struggling with the React getting started process, there is an approach which I see very efficient that will ease your process. You can start working without thinking about the separation of your application into smaller components. With this way, you can write your components as big, fat components. Once you have two or three like that, you will start seeing patterns which will make you think about isolations. That's where you can start drawing mockups like this one. I went this way at the start where I was really fuzzy about React but now, it's a set mindset for me that I start with a mockup.

Final point I want to touch on is about stability and problem solving, I think one of the biggest values of React is its stability and adoption. I can assure you that the most of your Web UI problems have an answer in React and it is also highly likely that someone has already written up a blog post, put a sample somewhere or answered a Stackoverflow question on that. Also, Facebook and some other big companies rely on React. So, the evolution of React is a fairly safe progress in this fast evolving JavaScript ecosystem.

Conclusion

In this post, I just wanted cover the React part of the story and I should admit that it's not much. However, my aim here is to convince you to give React a chance. I can understand that you may have questions about how to handle the data at this stage (e.g. how to react to the changes that happens behind the background, etc.). This is probably a good time for you to look at what Flux application architecture is all about and have a go with one of the state management libraries like Redux. This is the exact topic that I will touch on the second part of this blog post series, which will also highlight the practical strength of React along with Redux.

Further Resources

How Azure Web Apps Hosts an ASP.NET 5 Application

ASP.NET 5 application has totally a different directory structure when you try to publish it and it wasn't clear for me how Azure Web Apps is actually able to host an ASP.NET 5 application. If you are confused on this as well, the answer is here.
2015-04-12 10:13
Tugberk Ugurlu


I want to write this quick post because figuring out how an ASP.NET 5 application is hosted under Azure Web Apps was a big question for me. Some information is already there on this topic but the concept wasn’t crystal clear because when you look at the packed version of an ASP.NET 5 web application, it has the following structure on disk:

image

It will even get more interesting when you look inside the wwwroot folder:

image

We have the static files, bin folder which only contains AspNet.Loader.dll inside it and a web.config file. The most interesting bit here is the information inside the web.config file and this information will be read by Helios:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <appSettings>
    <add key="bootstrapper-version" value="1.0.0-beta4-11526" />
    <add key="runtime-path" value="..\approot\packages" />
    <add key="dnx-version" value="" />
    <add key="dnx-clr" value="" />
    <add key="dnx-app-base" value="..\approot\src\ConfyConf.Client.Web" />
  </appSettings>
</configuration>

web.config file gives us enough evidence that the wwwroot is the directory that we need to point IIS to and then Helios will read these application settings information to figure out where the application actually is, where the dependencies and packages are, etc.. Let’s deploy the application using Visual Studio Publish feature. I created a brand new Azure Web App on the fly and hit publish:

image

When the deployment is completed, the web site is immediately up:

image

Let’s look at how the directory structure look like after the deployment:

image

Two interesting bits here are approot and wwwroot folders. The question here is that how Azure Web App knew to look into wwwroot folder. It was actually dead simple but it wasn’t obvious at the first glance. Before showing the answer, let’s have a look what IIS Express does to host an ASP.NET 5 application which will give us an hint on the answer.

I fired up the application through the Visual Studio to get IIS Express host my application. After the application is up, I dug into Task Manager to get the command line arguments for IIS Express:

iisexpress.exe    10736    Running    Tugberk    00     33,804 K    33    "C:\Program Files (x86)\IIS Express\iisexpress.exe"  /config:"C:\Users\Tugberk\Documents\IISExpress\config\applicationhost.config"  /site:"WebApplication10" /apppool:"Clr4IntegratedAppPool"    IIS Express Worker Process

This points us to applicationhost.config file and WebApplication10 site inside it. When you look at the site node for WebApplication10, you will see that some of the magic is actually happening there:

<site name="WebApplication10" id="77">
    <application path="/" applicationPool="Clr4IntegratedAppPool">
        <virtualDirectory path="/" physicalPath="D:\apps\WebApplication10\src\WebApplication10\wwwroot" />
    </application>
    <bindings>
        <binding protocol="http" bindingInformation="*:47112:localhost" />
    </bindings>
</site>

wwwroot is pointed as a virtual directory for the web application here for the root path. So, is this information helping us to see how Azure Web App is hosting our app? Absolutely! It gives us the information that something similar should be configured on Azure Web Apps side that it sees the wwwroot folder as the root. If you navigate to Configure section for your Azure Web App and scroll down to the bottom, you will see the virtual directory configuration there.

azure-aspnet5-virtual-directory

Clever! My guess is that this configuration was put there when I was publishing the Web Application through web deploy inside the Visual Studio. Digging into Web Publish Activity output could give us more information about when exactly this configuration is set.

MSP Turkey Kickoff 2014 ASP.NET Web API and SignalR Presentation Slides, Recording and Links

I was at Microsoft Turkey office yesterday and I gave a presentation on ASP.NET Web API and SignalR in context of this year’s MSP Kickoff. This post covers where you can reach out to presentation slides, recording and several relevant links.
2014-10-19 13:44
Tugberk Ugurlu


Exciting Things About ASP.NET vNext Series: The Ultimate Guide

As of today, I am starting a new blog post series about ASP.NET vNext. To kick things off, I would like to lay out the resources about ASP.NET vNext here which is probably going to be an ultimate guide on ASP.NET vNext.
2014-10-03 11:49
Tugberk Ugurlu


Web development experience with .NET has never seen a drastic change like this since its birth day. Yes, I’m talking about ASP.NET vNext :) I have been putting my toes into this water for a while now and as of today, I am starting a new blog post series about ASP.NET vNext (with hopes that I will continue this time :)). To be more specific, I’m planning on writing about the things I am actually excited about this new cloud optimized (TM) runtime. Those things could be anything which will come from ASP.NET GitHub account: things I like about the development process, Visual Studio tooling experience for ASP.NET vNext, bowels of this new runtime, tiny little things about the frameworks like MVC, Identity, Entity Framework.

To kick things off, I would like to lay out the resources about ASP.NET vNext here. Enjoy them and start discovering what is coming up for the web development with .NET :)

Getting Started Material

Here and There ASP.NET vNext

Development Environment and Tooling Experience

Deployment

Deep Dive

MVC Specific

Badass Repositories

KRuntime: The core of the ASP.NET vNext. Compilation, bootstraping, package discovery and all other core stuff is handled here. Do not miss on this one!

kvm: K Runtime version manager which works on Windows and Unix based systems.

MVC: Written from scratch MVC framework on top of ASP.NET vNext. This new framework unifies the efforts on ASP.NET MVC and ASP.NET Web API. So, all is in one now.

HttpAbstractions: Contains HTTP abstractions for ASP.NET vNext such as HttpRequest, HttpResponse. Also contains IApplicationBuilder and types to create your application's hosting pipeline.

Home: ASP.NET vNext Home repository where you can get a head start on ASP.NET vNext really quickly. Its README file gives you a nice guide to get your machine up and running with the new tools. It also contains tiny samples which you can run and see how things are working in no time.

KestrelHttpServer: This repo contains a development web server for ASP.NET vNext based on libuv.

Configuration: Configuration is a framework for accessing Key/Value based configuration settings in an application.

Caching: Contains libraries for caching for ASP.NET vNext. Another sign that everything is now composable.

Options: Options is a framework for accessing and configuring POCO settings. Tiny thing that makes me happy that even this thing is thought of.

SignalR-Server: ASP.NET SignalR is a is a new library for ASP.NET developers that makes it incredibly simple to add real-time web functionality to your applications. This repository exposes ASP.NET SignalR on top of ASP.NET vNext.

Hosting: The Hosting repo contains code required to host an ASP.NET vNext application, it is the entry point used when self-hosting an application.

Videos

INTRODUCING: The Future of .NET on the Server: Very first video on ASP.NET vNext. Join the Lesser Scotts, Hunter and Hanselman, as they introduce you to new thinking around ASP.NET and the .NET Framework. What does ASP.NET look like in 2014 and beyond? In a world of NuGets and modular frameworks, of lightweight VMs, how could ASP.NET change and get faster, leaner, meaner, and more.

DEEP DIVE: The Future of .NET on the Server: Scott Hanselman joins developer David Fowler for this Part 2 Deep Dive into what’s coming in Microsoft ASP.NET. We explore what a decoupled stack looks like, how modules plug together, what this means for performance, and more. We explore the Project codenamed “Helios” and how this new way of writing ASP.NET applications uses OWIN and plugs into IIS giving you more power and choice than ever before.

Channel 9 Live: ASP.NET Developer Q&A with Scott Hunter & Scott Hanselman: The Scotts and David Fowler answer your questions live!

The Future of ASP.NET Part I: Scott Hanselman’s awesome intro talk on ASP.NET vNext at NDC Oslo 2014 conference.

The Future of ASP.NET Part II: David Fowler and Damian Edwards Q&A session on ASP.NET vNext at NDC Oslo 2014 conference.

An Introduction to ASP.NET vNext: Awesome introduction talk by Daniel Roth at TechEd New Zealand 2014.

ASP.NET vNext 101: Another great introduction talk on ASP.NET vNext by Damian Edwards and David Fowler at dotnetConf 2014.

ASP.NET MVC 6 (now with integrated Web API!): Awesome introduction at dotnetConf 2014 by Daniel Roth on ASP.NET MVC 6 which is a new baby from head to toe. ASP.NET MVC and Web API are being combined into a single framework, ASP.NET MVC 6, for handling all of your Web UI and services. We'll learn how to use ASP.NET MVC and Web APIs in ASP.NET vNext to support connected applications for browsers, Windows Phone, Windows Store and more!

Entity Framework: Rowan Miller gives us an introduction talk at dotnetConf 2014 about Entity Framework 7 which is built on this new .NET Runtime optimized for server. Entity Framework is Microsoft's recommended data access technology for new applications in .NET. We'll explore how the current release of Entity Framework can be used to build applications. We'll also look at an early preview of EF7, a modern, lighter weight, and composable version of Entity Framework (EF) that can be used on a variety of platforms, including ASP.NET vNext, Windows Phone and Windows Store. This new version will also support targeting non-relational data stores.

ASP.NET vNext with Chris Ross: On Web Camps TV, this week Cory is joined by Chris Ross from the ASP.NET team to talk about the vNext bits of ASP.NET. The next version of ASP.NET ("ASP.NET vNext") has been redesigned from the ground up. The goal is to create a lean and composable .NET stack for building modern cloud-based apps.

ASP.NET vNext Community Standup: Meeting recordings from the weekly ASP.NET vNext Community Standup meetings, covering live community Q&A, product team discussion and the most recent updates.

ASP.NET vNext - Everything you need to know in 4 minutes!: Nice intro on new ASP.NET vNext in a short, 4 minutes video. This nicely wraps up what are the new things.

ASP.NET vNext Giriş (in Turkish): 30 minutes webcast on ASP.NET vNext by Tugberk Ugurlu in Turkish.

Dev: ASP vNext: Scott Hunter and Brady Gaster talk about ASP.NET vNext at TechEd Europe 2014

The Future of Microsoft .NET on the Server: Scott Hunter’s TechEd session on ASP.NET vNext at TechEd Europe 2014.

Podcasts

Reconciling ASP.NET vNext with Damian Edwards: Hanselman sits down with Damian Edwards and talks about ASP.NET vNext. There's been a lot of talk around ASP.NET vNext. How did development start, and what's been the thinking about how to manage a new world while still innovating on the current generation of technology? In what ways does ASP.NET vNext break from the past, and in what ways does it build on our existing power and experience?

ASP.NET vNext with Jeff Fritz: Carl and Richard chat with Jeff Fritz about ASP.NET vNext at DotNetRocks.

Evolving ASP.NET Web Development with Scott Hunter: Carl and Richard chat with Scott Hunter about how Microsoft is working to evolve web development for ASP.NET developers. Scott talks about ASP.NET vNext as well.

Herding Code 198: Damian Edwards on ASP.NET vNext, Tag Helpers and SignalR: The guys talk to ASP.NET team member Damian Edwards about ASP.NET vNext (the next version of ASP.NET), Tag Helpers, and what’s new with SignalR.

Code Samples

MusicStore: Best sample out there for ASP.NET vNext by the team. It has two projects: one is for static-rendered Music Store application and the other one is a SPA (Single Page Application). Check out this article for further information about the sample.

BugTracker: Another sample application from ASP.NET team. This one is also uses SignalR. Check out the this article for further information about this sample.

MVC Samples: Lots of tiny MVC samples that ASP.NET team is using for functional tests.

Entropy: ASP.NET vNext feature experience playground of ASP.NET team.

MvcSample.Web: ASP.NET MVC 6 sample which highlights quite a lot of its features.

KLoggy: My playground for a few cool things such as ASP.NET vNext, Gulp, Bower, AngularJS. Check it out for sure. I have big plans for this :)

conch: Nice sample on ASP.NET vNext by Mark Rendle. The repo description says "Nothing to see here. Move along". So, keep that in mind :)

vNextLanguageSupport: A sample by David Fowler that has examples of how to support different languages in the vNext project system.

AspNetVNextSamples: My repository on ASP.NET vNext samples. It’s sort of tiny right now but I’m putting this here anyway hoping that it will get big in near future.

Microsoft Turkey Summer School 2014 - ASP.NET Web API and SignalR Talk

In context of Microsoft Turkey Summer School 2014, I had a chance to give a talk on ASP.NET Web API and ASP.NET SignalR a few days ago at Microsoft Turkey Office. Here is the slides, recording video and references from the talk.
2014-08-17 12:04
Tugberk Ugurlu


Tags