Sivarajan's Blog

SharePoint | Office 365 | Azure | JavaScript

Part 1 - How SharePoint Developers can extend their expertise to modern web development (SharePoint Framework)?

Last two years I had an extensive opportunities to learn and work with JavaScript and it is related technologies like Node.Js, AngularJs, ReactJs, KnockoutJs, Bower, yoman generator, Gulp, Webpack, Typescript, etc.

I did the self-learning from few various blogs, Udemy and Pluralsight. Based on my lesson learned, here I have listed out few links, which will help you to prepare the SharePoint Framework related technologies.

Why JavaScript is important for SharePoint Framework development?

As a SharePoint developer, we are expertise in ASP.NET, WCF, C#, XML, SharePoint Server/Client Object Model. But the entire SharePoint Framework development lifecycle is based out of JavaScript and it is related frameworks/technologies. So the best way to get into the SharePoint Framework is that, understand the core concepts of JavaScript.

Here is an excellent link to learn the JavaScript,

https://www.youtube.com/watch?v=Bv_5Zv5c-Ts

If you are interested to know more about JavaScript then, you can buy the 11 hours course from Udemy and here is a discount link for that course,

https://www.udemy.com/understand-javascript/?couponCode=YOUTUBE19

Why Typescript?

This is a super set of JavaScript and it is accepts JavaScript syntax as it is. Normally we will identify the mistakes in JavaScript at runtime. While adopting the TypeScript, will help us to identify the errors while writing the code or compile time itself. For a large JavaScript project, it will help us to write the most robust and code reusable software.

As a SharePoint developer, easily we can adopt TypeScript, since it has a similar features like Class, Interface, Inheritance, etc.

For simplifying the SharePoint operations, The Patterns and Practice team is building the JavaScript libraries called Pnp-Js-Core. They are building the entire library using TypeScript and they provided the detailed explanation about why they choose TypeScript for JavaScript development.

https://blogs.msdn.microsoft.com/patrickrodgers/2016/06/21/why-typescript-for-jscore/

And don’t forget, Microsoft is building the SharePoint Framework using TypeScript. But it is optional.

What is Office UI Fabric?

For Angular application development, we will use Bootstrap for branding and Angular UI Bootstrap for UI components. When we build the responsive SharePoint sites, we will use Bootstrap and it is not easy to integrate with SharePoint.

Similar to Angular UI Bootstrap, Microsoft is developing UI components called Office UI Fabric, which will work seamlessly across Office Add-ins, SharePoint Online and SharePoint On-premises.

http://dev.office.com/fabric

Andrew Connell has created the open source project for Angular 1.x Components for Office UI fabric.

http://ngofficeuifabric.com/demos/

https://github.com/ngOfficeUIFabric/ng-officeuifabric

Since Microsoft is developing a SharePoint Framework using ReactJs and Office UI fabric, I hope that, we can expect the similar components for ReactJs.

Which is the right Front-end technologies for SharePoint Framework development?

Microsoft has clearly mentioned in their key notes, they are building the framework and it is related samples using KnockoutJs and ReactJs with Typescript. Since it is an open-source based development model, choosing the framework/technologies are completely our choices, based on our knowledge and requirements. Here I have listed out a few front-end technologies.

  1. Angular 1.x - https://angularjs.org/
  2. Angular 2 - https://angular.io/
  3. ReactJs - https://facebook.github.io/react/
  4. KnockoutJs - http://knockoutjs.com/
  5. Ember.Js - http://emberjs.com/
  6. Backbone.Js - http://backbonejs.org/
  7. Aurelia.io - http://aurelia.io/

If you are new comer to front-end development then, you can choose either Angular or ReactJs.

Video Tutorials for both Angular and React

https://www.youtube.com/watch?v=ejBkOjEG6F0

https://www.udemy.com/learn-angularjs/?couponCode=YOUTUBE119

https://www.udemy.com/learn-angularjs/learn/v4/overview

https://app.pluralsight.com/library/courses/angular-typescript/table-of-contents

https://app.pluralsight.com/library/courses/react-flux-angular/table-of-contents

https://app.pluralsight.com/library/courses/building-sharepoint-apps-spa-angularjs/table-of-contents

Build Automations - Gulp or Webpack?

Since the entire SharePoint Framework is based on JavaScript, we need to write and manage the 1000s of Script references. Similarly while writing the implementation in TypeScript, it will be automatically converted to JavaScript by transpiler.

For my experience, Gulp task is best for Angular based application development and Webpack is suitable for React.Js based development.

In the coming series, I will provide the step by step walk-though for build automation.

In-Person or Live Online Training

As a SharePoint developer, we need to update the various skills to extend our expertise to modern SharePoint development. Suppose if you are looking for in-person or online live training from experts then, you can follow the below link to catch them.

http://academy.yukthicorp.com/post/angular-js-for-sharepoint-developers

 

Summary

In the next post, we will see that how to install and configure Node.Js and NPM in Windows.

Add comment

Loading