Agility + React Workshop

 

Before We Start

  • Must have an Agility React Sandbox
     
  • Visual Studio 2015/2017 Community or higher installer
     
  • Grab a something to drink
     

James Vidler

Director of Technology

About Me

  • Former head of professional services team
  • Partner and Developer advocate

Ask me About:

  • Development
  • Architecture
  • Training + Docs
  • Feature Requests
  • Azure

Contact me:

Email

Facebook

LinkedIn

 

 

Agenda

  • Setup
     
  • Client App vs MVC App
     
  • MVC App Project Walk-through
  • Lab: Create a module using 100% VS Code
     
  • Open Discussion

Setup

  1. Sign up for your Agility React Instance (ask support@agilitycms.com for access)
     
  2. Clone the Git Repo
     
  3. Update your web.config.sample with authentication details, then rename to web.config to initialize your config
     
  4. Open the .sln in Visual Studio 2015/2017 and ensure you can build and run the project - we'll be switching to VS Code later

Why React for Frontend?

  • Speed of development
    • modern framework
    • lots of community support
    • most popular js library
    • There's always an "NPM package for that"
       
  • Easier to maintain
    • Great for building consistent UIs
    • Supports server-side-rendering (SSR)
    • Integrates well with Webpack

Agility + React

  • Go Traditional MVC or headless
     
  • Traditional = Best of both worlds
    • MVC + Agility.web sdk powers the back
    • React powers the frontend
       
  • Headless = Client app/SPA
    • Use Agility REST API
    • React powers entire application

Traditional MVC

  • JSX components replace Razor Partial Views in modules
     
  • Supports server-side-rendering
     
  • Keeps your content easily indexable
     
  • Decide what modules are server/client rendered, or both
     
  • Build a consistent UI across server and client rendered views
     
  • Take full advantage of Agility.Web sdk and sync architecture

Traditional MVC
Other Considerations

Headless

  • Use Agility REST API
     
  • 100% client app or any server app
     
  • Full control over the entire application
     
  • You must handle your own routing
     
  • No native way to sync, or preview content

Headless
Other Considerations

  • Must use a JS module bundler, Webpack recommended
     
  • SEO
    • Google appears to crawl 100% client React Sites decently well
    • Other search engines don't
    • Be vigilante with your SEO requirements
       
  • Work 100% in VS Code

MVC + React Project Walkthrough

View on GitHub

Open Discussion

  • Build list of 'todos' on github
  • Future with .NET Core

Beer + Hack!

  • Grab a beer/coffee and take a break
     
  • Review 'todos'
     
  • Working in teams, tackle a few 'todos' we have in github

Upcoming Developer Events

  • Intro to Agility Development Workshop - Dec 7, 2018

  • Ecommerce Workshop - January 2018

  • .NET Core Workshop - February 2018

  • Personalization Workshop - March 2018

Burning Questions...

Resources: