Announcing Masonry public preview


Today I’m happy to announce the public availability of my new project “Masonry”. Please note that this post is a high-level overview of the project and its major features. For the sake of simplicity technical details are omitted. Developer-oriented articles will be published separately.

Introduction

Social networks and corresponding UI/UX gains more and more attention. Even big enterprise players are looking forward to embedding social and gamification features into their products these days. Most of the projects I’ve been involved with during this year had requirements for lightweight “socialization” of common business workflows, i.e. chats, timelines and data aggregation, comment systems, following/unfollowing, user profiles, etc. Most of the project prototyping I’ve observed or was part of during the year assumed Twitter/Facebook-like user experiences besides mandatory functionality requirements.

Masonry was born as an ASP.NET MVC4 starter kit (or template) to greatly reduce learning curve, time and development efforts required to start prototyping and building social-enabled web applications, or integrating social-enabled features into existing applications. It provides most common building blocks and allows startup or research teams concentrating on main application functionality rather than building social features from scratch.

Home Page

Overview

Masonry is not a static template. Many frequently required and expected features are still being researched, analyzed and included into the roadmap. You should expect frequent updates that bring new blocks in the future.

The major set of features shipped with initial beta is as follows:

  • Account registration with email confirmation/validation and reCaptcha support
  • Account settings and password management
  • Timeline and user posts (status updates)
  • Public profiles, following/unfollowing other users
  • Personal feeds and “twitterization” of content (account links, hash tags, etc.)
  • Comment system
  • Mentions and People hubs
  • Wiki-based help system with Markdown support
  • Extensibility support (single-assembly modules built with ASP.NET MVC4 template and deployed with xcopy)

There’s also a supplementary content to aid development:

  • Default demo database to get started instantly (SQL LocalDb)
  • SQL schema scripts to setup a new database
  • Visual Studio 2012 project template for creating custom extensions/modules with less efforts

Account Registration

Account management is built on to of SimpleMembership provider by MS used in most of the WebMatrix projects these days. That allows having more flexible membership scenarios (i.e. support for external OAuth authentication models, Facebook/Twitter/LinkedIn integration without much efforts) and provides greatly refined SQL database schema compared to popular ASP.NET SQL Membership provider.

Registration form prevents cross-site request forgery (CSRF) out of box by utilizing ASP.NET MVC’s AntiForgeryToken helpers.

Google reCaptcha is also preconfigured by default

Account Registration

In addition Masonry supports account validation and email validation. This feature when opted in through configuration allows automatically generating confirmation emails with links to confirm and enable newly created account.

Signing in

Similar to Registration form the LogOn one prevents cross-site request forgery (CSRF) attacks by default. All redirect URL links (used to redirect back to the requested content that requires authentication) are verified to be valid local addresses rather than external links.

Sign In

Timeline

All authenticated users are automatically redirected to the Timeline. Similar to Twitter it is a long stream showing all Posts from those you have chosen to follow, or your own posts with user comments. There are no paging controls on the Timeline, similar to Facebook new content is downloaded smoothly while you scroll down the page.

Timeline

All content is “twitterized” by default – all user account tags are turned into user profile links and point to Personal Feeds (see below), all hash tags are wrapped with hyperlinks redirecting to internal Search controller upon click. In addition all hash tags are enumerated in a separate area below the main post content.

There are at least 2 easy ways to post new content (i.e. status update) in Masonry:

  • Inline editor box at the bottom of the Timeline
  • “New Post” button on the header bar and available on any page

Image below demonstrates a dialog that appears when user presses “new post” button:

Status Update

Personal Feeds

Masonry provides support for personal feeds – streams showing public posts by a specific user. There are several ways quickly accessing personal feed:

  • User account name within the post header
  • User account tag within the post or comment content
  • Public profile dialog that pops up upon clicking user avatar
  • People or Mentions hub

Upon navigation the sidebar control will automatically reflect the account opened:

Personal Feed

Public Profile Popups

Masonry automatically wraps all user avatars with profile popups that allow following/unfollowing particular user, navigating to a personal feed or People hub to see followings/followers.

Profile Popup

Mentions

Similar to Twitter Mentions Masonry provides support for streaming posts that “mention” current user – i.e. any post that has an account tag in the content. All Timeline features like profile popups, comments, personal feed navigation are automatically applied to Mentions stream as well.

Mentions

People Hub

To simplify intranet/corporate scenarios Masonry provides a special feature “People Hub” that allows newly registered users discovering already existing members (to follow, view personal feeds, etc.). People hub lists existing uses with basic public information (see Account Settings section below) and main statistics like number of posts, followers or users being followed by a particular user. It is possible following/unfollowing users directly from the People hub:

People Hub

Note: it may be possible wiring People hub with additional logic and business rules, like showing/filtering users by department, etc.

Account Settings

Users can access their account and profile settings from the header bar. Besides account editing Settings drop down menu provides access to Help system, About information and allows signing out as shown on the picture below:

Settings

There are no mandatory fields within account settings section. All public fields are optional: photo, display name, location, website and bio. If current browser supports HTML5 File API user will be able to preview changes to the picture live without uploading any data to server.

Account Settings

Both “Account settings” and “Change password” forms provide lightweight unobtrusive alerts to indicate update results.

Change Password

Comment system

For extensibility and flexibility purposes Comment system in Masonry is separated from status updates (posts). To avoid user distraction comment areas are collapsed by default:

Generic Post

Moreover comments are loaded asynchronously upon expanding “Comments” area. That reduces initial page memory footprint and speeds up main content loading.

Post Comments

The author of the post has possibility removing posts with corresponding comments:

Removing Posts

Similar to Facebook Masonry supports displaying posts in separate pages. Every post that has more than 10 comments is automatically opened in a separate view.

Help System, Markdown Support

Help system is a separate block within Masonry that provides Wiki-like experience and powered by Markdown syntax.

Help System with Markdown

Underlying Help Controller maps physical “.md” files automatically, it is possible updating Markdown content with a running application:

Help Content

Markdown syntax

Extensibility and Modules

Masonry utilizes Managed Extensibility Framework (MEF) and ASP.NET MVC Areas to provide rich extensibility support. External extensions are discovered and loaded automatically with zero code configuration and prerequisites within main application. All extensions are represented by a single-file assemblies containing a fully-fledged ASP.NET MVC4 pieces together with static content, styleshees and javascript files.

Upon new extension library discovery Masonry automatically augments UI with additional entities taken from the corresponding plugin:

Extensions

Every custom extension can provide extra elements for header bar (with grouping support), sidebar, may provide user with additional content. With Masonry it becomes extremely easy extending standard UI and functionality.

Dummy Extension

In order to greatly simplify development process Masonry provides a special “Masonry Extension” project template that can be used with Visual Studio 2012. This project template takes care of project structure generation, enables Razor compilation and syntax highlighting for the generated class library project and contains all extensibility/routing settings automatically preconfigured.

Note: there will be a separate article that dives deep into Masonry extensibility, tooling and plugin development. 

That’s pretty it. Feel free to grab the code, play with it, request features that are important, file issues… everything is in the GitHub repository.

Thanks for following.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s