Sunday 11 January 2015

Minification Tooling

Overview: Minification is the process of combining multiple css or js files, removing whitespaces and comments to improve web site performance.


Tools:
YUI Compressor(Yahoo)
Web Essentials(Microsoft)
Mavention(Microsoft)
Grunt
jscompress.com/
Google Code Compress (Google)


I'd always go for 1 of the Microsoft tools: Web Essentials or Mavention as the plug into Visual Studio, as a SharePoint guy this would be my preferred option.  Both the MS tools appear to use the same engine as the compression appears identical, work out to roughly 60% on both CSS and JS compression.

Thursday 1 January 2015

UI and Framework Notes

Assumed/Common Framework:
jQuery
Knockout vs Angular vs Backbone -
Modenrizr.js - detect browser capability
underscore - utility functions for arrays and collections.  Feels like LINQ queries
toastr - toast notifications

Data Access Modules:
1.> data.js - manage OData client access for JavaScript (supports caching & batch operations)
2.> Breeze.js - entity modelling and querying (ORM for JS.  Backend transformed to a data object i.e. 3 related customer tables becomes the customer object). Looks like LINQ queries.  Data.js is inside of breeze.

Presentation / App Pattern:
Knockout.js - (MVVM), declarative binding and dependency tracking.  Matches data to front end, then track changes and update.   Easy to use and understand.
Angular.js - MVC data binding,routing (url controls pages).
Compare: Knockout (good for SPAs) for more complex application whereas knockout is more light weight.

Responsive Web Design (RWD):
LESS - Minimises css, makes it simple to read not repeating attributes.
Bootstrap.js / Zurb Foundation 4 - Media queries to style for the device based on 12 column layouts.
Framework for cross cutting concerns (logging, caching,)....

Progressive Web Apps (PWA):
"Progressive Web Apps allow what you build to be installed by anyone, anywhere, on any device with a single codebase"

Flutter:  
Created by Google that uses DART .  Build once and HTML deploy for browser UI needs to be responsive.  Separate deployable code for Android and iOS, so PWA compliant.

PWA/RWD UI 3 break points:
  • Desktop: 1024+ 
  • Tablet: 600-1023
  • Mobile: 320-599

Useful JS modules:
JS Mapping module:

Tuesday 16 December 2014

SharePoint 2013 Public Website Check list

Ux:
  1. Responsive design vs Device channels - Does the site switch resolutions and browsers gracefully.  RWD vs AWD (Adaptive Web Design)
  2. Broken Links: Check My Links 3.3.4 is a plugin for Chrome to check a page for broken links (go over main pages at least)
  3. Fiddler - Use for 404, and other errors, look for dodgy urls and headers being passed around.
  4. Charles is a similar tool - helps with broken links, size of files, shows web calls, review response headers, size of files and speed of execution.
  5. Minification - is the minification of JavaScript and CSS.
  6. Alt labels, WCAG, valid html checker
SEO:


Testing:
All devices and browsers (1. PC/laptop (IE 11-IE7, Chrome, Firefox, Opera, Mac/Safari), 2. Phones(iPhone, Android OS, Windows OS), 3. Tablets (Android, MS/Surface, iOS/iPad).

Helper Tools:
AddThis.com - Nice tool to add Social bookmarking service for your websites. Collects stats TypeKit - Nice for Fonts, review the licensing needed.

Security:
  1. Check Internal Search is not returning passwords
  2. Check google is not picking up passwords/confidential data 
  3. Remove response headers:
  4. MicrosoftSharePointTeamSiteServices(versio), X-Powered-By. X-SharePointHealthScore, X-aspNet-Version) Performance X-SharePointHealthScore
  5. Check XSS and SQL but with SharePoint you are testing the product
<script>alert();</script>
<img src=;; onerror=alert();>
<iframe src=javascript:alert();>

Wednesday 3 December 2014

SharePoint 2013 workflow

Overview:  SharePoint 2013 has a new workflow engine, you can still use SP2010 workflows.  Not that SP2013 workflow works as a separate install and then a services is setup (same change as for Office Web Apps).


Overview of SP 2010 and SP2013 workflow
Created workflows using Visual Studio or SharePoint designed for SP2013 workflows (Visio also I believe)

Thursday 27 November 2014

One Drive terminology in a picture

Problem: Confused by SkyDrive / OneDrive / My Site One Drive for business and MySite now call OneDrive with OneDrive labelling?
http://technet.microsoft.com/en-us/library/dn167720(v=office.15).aspx





Friday 17 October 2014

SharePoint Hosted Apps vs Embedded JS


Overview: The use of Apps (specifically SPHA) in SharePoint seems to be misunderstood, developers and architects often want to use the App model for functionality that folks have built using previous versions of SharePoint.  Apps are reusable pieces of custom logic akin to a specialised document library.

The app needs to be deployed to the catalogue store and permissions granted to leverage SP functionality.

SharePoint Hosted Apps (SPHA) are the internal sub web created with SharePoint, that can use JavaScript to perform customisation.

For example I want to read values from a term set, you can simply embed JavaScript and using the current users context get the term set data you want.

Permissions in SPHA run in the context of the current user as opposed to Provider Hosted Apps that can run in either: current user context, app context or app and current user context.

Deployed JavaScript will perform exactly the same when called from a page or from a SharePoint page or from within the SPHA (app web).  JavaScript runs in the context of the current user for both approaches.

The following embedded JavaScript works both in a web part page or in a page inside a SPHA (app web):

<script type="text/javascript">
var termSetName = //document.getElementById('termsetID').value;
var locale = 1033; // your locale. Here is English
var context  = SP.ClientContext.get_current();  //User the current users context.
var taxonomySession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);
var termStore = taxonomySession.getDefaultSiteCollectionTermStore();
var termSets = termStore.getTermSetsByName(termSetName, locale);
var termSet = termSets.getByName(termSetName);
var terms = termSet.getAllTerms();
context.load(taxonomySession);
context.load(termStore);
context.load(termSet);
context.load(terms);
context.executeQueryAsync(function onSucess(){
  var termEnumerator = terms.getEnumerator();
  var termList = "Terms: <br/>";
while(termEnumerator.moveNext()){
var currentTerm = termEnumerator.get_current();
termList += currentTerm.get_name() + "<br/>";
}
Windows.alert(termList);// Output to the screen                                 
                },function onFailure(args){
                    // Notify user of error
                });         
}

The user only needs to be a visitor to have read access to the term store.  JS works in the same way whether inside an SPHA or within a page on a SharePoint site.

“Apps that do not make OAuth authenticated calls (for example, apps that are only JavaScript running in the app web) cannot use the app-only policy. They can request the permission, but they will not be able to take advantage of it because doing so requires passing an app-only OAuth token. Only apps with web applications running outside of SharePoint can create and pass app-only tokens.”  MSDN article

JavaScript inside a SPHA can only run within the context of the current user.
Provider-Hosted Apps (PHA) can use either:
  • context token (user context)
  • user+app access token
  • app-only access
This was spoon fed to me from some good folks I'm working with Nick, Sachin & Peter- thank-you.

Thursday 16 October 2014

Cross Cutting Concerns for SharePoint 2013

Overview:  Last week I was speaking to a smart chap and he dropped the term Cross Cutting Concern as we were discussing SharePoint Host Apps (SPHA) and JavaScript.

Problem:  When creating apps for SharePoint 2013 multiple solutions need to address cross cutting concerns.  In the past I deployed a SharePoint library with caching, logging, lazy loading and various other "Cross Cutting Concerns", now for Provider Host Apps (PHA), SPHA and JS embedded within pages and Single Page Apps (SPA) we need frameworks for clients to address common components.

Hypothesis:
Caching for Client Side Code: In JavaScript you can either cache using the client cookie which is small or in HTML 5 based browsers use the JavaScript local store. 
Caching on the Server: All the normal Caching of C# or Azure are available.  Also look at Redis.

References:
http://en.wikipedia.org/wiki/Cross-cutting_concern
Update 27/01/2015:
http://channel9.msdn.com/blogs/OfficeDevPnP/SharePoint-Apps-and-client-side-caching