title	tags
MashupJS	Getting Started AngularJS Bootstrap Style Guide Modern Stack

MashupJS

The Mashup is an attempt to leverage modern web stack technologies and techniques to address technical debt, establish an enterprise ready bootstrap, and to learn and teach AngularJS.

• One code base for all platforms including web, tablet, and mobile applications.

• Bootstrap for large enterprise applications leveraging lazy loading, built in cache options, advanced routing.

• Build your personal and team code library. Use for learning and teaching.

##Getting Started

1. Install NodeJS
2. Open a command line
3. Install gulp
   • npm install gulp -g
4. Install bower
   • npm install bower -g
5. Download and unzip this repository
6. Create a place to work with the "src" folder
7. Navigate to src/Mashup.UI.Core/
8. Install npm packages
   • npm install
9. Install bower packages
   • bower install
10. Build the project
    • gulp
11. Fire up Visual Studio and load the .sln file or use your favorite IDE.

If using Visual Studio change the Project (menu) --> Mashup.UI.Core properties (menu item) --> Web (tab)

• change "Start Action" to "Specific Page" with a value of "dist/index.min.html".
• The dist folder won't exist until after you've executed the gulp task.

##Design

• Directory Structure
• Defining Routes
• Drop-in Application Support allowing teams to divide up their applications and combine them during deployment.
• Applications Support
• Dynamic Menu Support
• Dynamic Routing Support

TODO: add to Arch/Comp

• Much of this is in the style guide. Reference that where possible.
• Create graphs and other artifacts that make using the Mashup easily understandable and supportable.
• Add enough design that a company using the Mashup can consider the system well documented.

##Tools Tools I use for my workflow

##Philosophy behind the Mashup

Philosophies

Technical Debt

• Reduce Technical Debt
• Mobile First
• Offline First
• (RWD) Responsive Web Design
• Continuous Integration
• Continuous Delivery
• Single Code Base /w hybrid option

##The MashupJS Style Guide

MashupJS Style Guide

The MashupJS Style Guide describes how to use the Mashup and opinionated best practices.

Additionally this Guide links to other popular style guides.

TODO: add style guides for WebApi, C#, Grunt/Gulp, etc.

##Workflow TODO: [Link to markdown]

notes - don't read this :)

• Create a new project
• Add new application to the Mashup
• Add new page/route
• Add services/directives
• Updating the Mashup core
• Managing your custom code
• Removing the mashupjs
• Integrating with API
• Data service tier
• Using task runners
• Using source control
• Publish your Mashup
• Deploy as Hybrid mobile app
• DevOps
• My personal workflow
  • walk through of changes, commit, test, publish
  • change log

##Using the Mashup for the enterprise TODO: [Link to markdown]

notes - don't read this :)

• Single app
• Multiple apps
• Mobile apps
• Team structures /w Mashup
• Update strategy

##Grunt/Gulp/NPM managers TODO: [Link to markdown]

notes - don't read this :)

• Rehabilitate current grunt. It's to slow.
• Grunt basics
• Grunt /w the Mashup
• Gulp basics
• Gulp /w the Mashup
• Build strategy for the Mashup core
• Build strategy for apps in the Mashup
• NPM Basics
• NPM /w the Mashup

##WebApi How to Create a WebApi for MashupJS

WebApi-Cors-Chrome

##MashupJS Implementations

Basic MashupJS

This is a good place to begin. This is the implementation referred in the Getting Started section of this document.

####npm install mashupjs

• Link to WebApiAuth example app
• Link to Multi-Session example app
• Link to Ionic hybrid example app
• Link to advanced routing example app
• Link to various teaching example apps
• Link to 3D UI example apps

##Features available to all Mashup applications All applications added to the Mashup will receive many features for free. This goes a long way to reducing technical debt. The basic/standard plumbing all applications need in your environment can be built once, maintained in one place, and a benefit to all your applications.

Here is a running list of features:

• Drop-in Application Support
  • Dynamic Menu Support
  • Dynamic Routing Support
• Bootstrap for Large Enterprise Applications
  • Applications Support
• One Code Base for all Platforms
• Swappable index.html /w (SoC)
• Sessions and Authentication
• Integration with Active Director (easily customized for integration such as Federated Auth)
• Logging: (Intercepts and logs $log statements for remote troubleshooting of production systems)
• Exception Management
• Cache Service
• Rest Service Detection and Heartbeat Monitors
• Micro-library Management (update libraries in one place will update the library for all apps)
• Hybrid-App: All applications can be converted into hybrid-mobile apps and deployed via app stores
• Shared UI look and feel
• User Session Management
• Shared Build System
• Shared Services, Filters, Directives, and any other custom JS code
• Lazy loading of HTML templates and JavaScript modules
• Shared User Alert System
• Retrieval of Client Information for troubleshooting
• Instrumentation (easily track the pages and features users use)

##Core Services

• Alert Service
  • Not documented. It's a simple alert that will be replaced by John Papa's toaster.
• Cache Service
• Detect Service
• Log Service
• Utility Service Facade
• Multi-Auth Session support - Documentation needs updated to reflect how the new session works.

##Roadmap

• Application Level User Management
• Exception Management (Dashboard, granular config)
• Instrumentation (Dashboard, granular config)
• Ionic integration for hybrid-apps
• Shared at a glance monitoring of the system. Can filter by user, group, application, etc.
• Background lazy-loading of js files