Pop Quiz

Pop Quiz

`Most Dreaded`

SharePoint Development

• Master Page/Page Layout
• Web Parts
• Bundled Solutions & Apps
• Content Editors
• Script Editors
• Iframes(?)

• File Deployment
  • WSPs
  • File Libraries

SharePoint Web Development

Content Editor:

• Links to an external Markup Document
• Allows manipulation of Text & Markup wysiwyg style

Script Editor:

• Write JavaScript directly onto the page

SharePoint Web Development

Content Editor:

• Links to an external Markup Document
• Allows manipulation of Text & Markup wysiwyg style

Script Editor:

• Write JavaScript directly onto the page

SharePoint Web Development

SharePoint Document Library:

• Deployable from anywhere
• No downtime
• Site-wide(ish)

Deployed Solution:

• Visual Studio & Package
• Client side & server side 
• Downtime
• Site-wide

SharePoint Web Development

SharePoint Document

Library:

• Deployable from anywhere
• No downtime
• Site-wide

Deployed Solution:

• Visual Studio & Package
• Client side & server side
• Downtime
• Site-wide

Setting up a React/ES6 Pipeline

class Counter extends React.Component {
  state = {
    count: 0
  }

  handleIncrement = () => {
    this.setState((prevState, props) => {
      return ({ count: prevState.count + 1 });
    })
  }

  handleDecrement = () => {
    this.setState((prevState, props) => {
      return ({ count: prevState.count - 1 });
    })
  }

  render() {
    return (
      <div className='counter-app'>
        <div className='counter'> {this.state.count} </div>
        <button className='counter button' type='button' onClick={this.handleIncrement}>
          increment
        </button>
        <button className='counter button' type='button' onClick={this.handleDecrement}>
          decrement
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Counter />,
  document.getElementById("root")
);

Setting up a React/ES6 Pipeline

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) {if (window.CP.shouldStopExecution(1)){break;} var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); }
window.CP.exitedLoop(1);
 } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Counter = function (_React$Component) {
  _inherits(Counter, _React$Component);

  function Counter() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Counter);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {if (window.CP.shouldStopExecution(2)){break;}
      args[_key] = arguments[_key];
    }
window.CP.exitedLoop(2);


    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Counter.__proto__ || Object.getPrototypeOf(Counter)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      count: 0
    }, _this.handleIncrement = function () {
      _this.setState(function (prevState, props) {
        return { count: prevState.count + 1 };
      });
    }, _this.handleDecrement = function () {
      _this.setState(function (prevState, props) {
        return { count: prevState.count - 1 };
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Counter, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        { className: 'counter-app' },
        React.createElement(
          'div',
          { className: 'counter' },
          ' ',
          this.state.count,
          ' '
        ),
        React.createElement(
          'button',
          { className: 'counter button', type: 'button', onClick: this.handleIncrement },
          'increment'
        ),
        React.createElement(
          'button',
          { className: 'counter button', type: 'button', onClick: this.handleDecrement },
          'decrement'
        )
      );
    }
  }]);

  return Counter;
}(React.Component);

ReactDOM.render(React.createElement(Counter, null), document.getElementById("root"));

Source Code!

Transpile!

Package!

Deploy!

Writing your own Pipeline

• Familiarizing & learning the transpilation toolchain
• Setting up your own development server
• Configuring your own local development environment (linting/test-runner/etc.)

Writing your own Pipeline

Worth it if:

• You like customizing your own tooling or want to use features not directly available in a pre-built pipeline (SASS/LESS, etc)
• Your widgets need to be in SharePoint to be worked on (require access to multiple data sources in SharePoint or interact heavily with the SharePoint UI)
• You want the bare minimum: transpilation and deployment.

Using CRA as a Pipeline

Using CRA as a Pipeline

Issues: Very Abstracted System

• No access to the build tooling without 'ejecting'
• Not immediately obvious how to extend overall pipeline for own or custom use.
• Requires a bit of custom finagling to play nice as part of a CMS

Using CRA as a Pipeline

Providing Externals:

Using CRA as a Pipeline

Opinionated Build Additions:

Using CRA as a Pipeline

Opinionated Build Additions:

Using CRA as a Pipeline

Opinionated Build Additions:

• Do you need code-splitting, or service workers?
• Do you need automatic source maps, asset manifest generation, etc?
• Might be overkill, depending on your needs. SharePoint doesn't necessarily aspire to be a PWA.

Using CRA as a Pipeline

Optimized for a single page application:

Automating Deployment

Authenticating to SharePoint

Saving files to SharePoint

The Holy Grail - Automation!

Using Gulp

Using Gulp

Insert automated deployment into your workflow anywhere:

Using Gulp

Insert automated deployment into your workflow anywhere:

Injecting React into existing Markup

Injecting React into existing Markup

• jQuery/Javascript
• Adding the root divs for react components to the server-side markup
• Yup, still weird.

Development Environment

• Node based
• Yeoman for scaffolding
  • Provides access to various javascript frameworks currently supported: React/Angular/Knockout(?)/etc.
• Uses gulp as a task runner and for workflows

Opinionated

• TypeScript
• Config is abstracted away
• Tightly coupled to SharePoint processes

Still nice!

• Hot Reloading Dev Server!
• Generator works nicely!
• Debugging very pleasant!
• Packages with no problems!

Building a Web Part

Tight Integration

• Direct access to the Properties Pane!
• Easy interaction with SharePoint REST layer
• Easy interaction with traditional C# web parts

Deploying to SharePoint

SharePoint Online

• Works out of the box, more or less.

SharePoint On Premises

• Feature Pack 2
• Configuring an environment for Apps

• Wildcard SSL certs
• Subscription Settings

• Application Domains?
• Multi Tenant Settings?
• App Catalogs?

Seriously the config takes forever

Eventually you have an App!

Thanks!

Basic Overview of My Stuff

•  My Shell is 'fish'
  • link
• VS Code with 'Material Palenight Theme'
  • link
• Yarn Package Manager
  • link