How to build SPA using sharepoint - sharepoint

My company is big on sharepoint. but server side controls have inherent problem with performance. I want to move page rendering responsibility to client side with concept similar to SPA. what is best framework or architectural style for this.

Single Page Applications are gaining immense popularity these days mainly because of their fluidity and responsiveness. Clearly the framework and architectural style depends heavily upon the requirements.
Framework:-
There are host of frameworks available that can be leveraged depending upon the complexity of the SPA you are planning - Backbone, Angular, Knockout, Ember etc. I personally prefer Angular and Knockout frameworks because of their simplicity and data binding and directive capabilities. Moreover you can also efficiently handle REST calls to SharePoint using Breeze.js. Refer to this link for more details.
Architecture Styles:-
Typically SPAs use MVC or MVVM patterns to decouple the UI aspect from the business logic, but this again is requirement driven. Regardless of the style/pattern it is important to keep the code modular and no to expose implementation details as much as possible.
Packaging:-
As far as SPAs for SharePoint are concerned, the best way to package and deploy them is in the form of SharePoint Hosted Apps. SharePoint Hosted Apps only allow client side code and hence leveraging Javascript object model and REST API for SharePoint making them ideal for deployment of SPA over SharePoint.
References:-
https://www.pluralsight.com/courses/building-sharepoint-apps-spa-angularjs

Related

Resources/Explanations on Current Web Architecture & Technologies across the stack?

I am building a new web app but i feel i don't have the big picture representation that I wish to have before building it so I am looking for resources to really understanding the web as whole throughout the full stack.
I've been a self-taught web developer since 2006 but I took a long break during university in 2010 and finished in 2014 and came out and the whole picture of web had changed.
I was familiar with the LAMP architecture and back then as long as you understood PHP, JavaScript, JQuery, MySQL, HTML & CSS you were fine; now MEAN is making a lot of noise and i just took a look at what Facebook is built with and it talks of HipHop which I have never heard of before and i feel quite lost with frameworks and languages popping out every other week.
I basically am looking for resources to understand the web as a whole, not just to create web pages so I can make informed decisions about building this and any other web app in the future. I want to know how all these new technologies are fitting into the picture.
Thank you
The big picture is you need a database, a data access layer that talks to that database, something to route the requests and something to display the result to the page.
There are lots of frameworks / technologies. IMO the LAMP stack is a bit old school. Not that it's not fit for purpose, it's just there are faster, better, easier stacks than that.
In terms of development languages and frameworks I would check out
Ruby-on-rails,
Spring-boot (with MVC, JPA, freemarker + mysql),
ASP.NET5
For databases mysql is always really popular because it's free. H2 is a free in memory database, I thinks it's a nice db to get up and running real fast.
Generally these days data access Is done through some sort of 'Object Relational Mapper' framework like Hibernate (if ur using Java), Linq (if ur using ASP.NET) or whatever ruby on rails uses.
For the view technology html, css is obviously standard but lately Bootstrap3 is really popular as a front end UI framework to make things a lot easier. In terms of Javascript, jQuery is basically a defacto standard these days. Something like Knockout.js or Angular.js provides nice data binding between your model and your view to make things a lot easier.
Not to mention as an extra layer these days people are also putting their apps inside Docker containers and deploying them that way for maximum portability. So that is something that is new and to you won't have seen before if you've been away from the game for a while.
Anyway, my favourite is the spring-boot stack. It has an embedded instance of the Tomcat web server and it comes all auto configured.
I believe the main changes that affected the course of current web development scenariois related to cloud based services, like Amazon AWS, Google Cloud, Microsoft Azure, and Virtual Private Servers (VPS).
Now is cheaper and possible to plan and develop a distributed environment to achieve a massive numbers of users. Servers are adapting their technologies to this new scenario and to providing easy webservices endpoints for mobile clients via REST APIs (like Google, Facebook, Soundcloud and almost every other service provider) using JSON for small data transfers between server ans clients.
This is the present and near future of web development. And we can no more close our eyes to mobile. Te mobile first era is comming.
You can use LAMP stack for webdevelopment, with or without frameworks like zend, cakephp and others, but the end product will be a REST or RESTfull service provider and a client to consume the services and integrate with many 3rdParties like Google, Yahoo, Facebook, Amazon services to build modern applications.
As for databases, there are now distributed non relacional noSQL hadoop, mongodb, mariadb bring more options to plan robust infra-structure and flexible ajustable for all needs.
To create a great web platform is necessary to know the existence of all this tools and possibilities, but specialize and deep learn only the tools you will choose to develop, because it is impossível learn everything, our brain cant handle :) and all se em to update very fast in this area.
Choose right one is difficult, there is a lot of options, but the main concept will be always the same, there will be a provider and consumer fronts, distributed or non-distributed, and a multi layered development involving UI, integration, business and data (big data) manipulation. But now on the Cloud.
You can find good official material for Php, amazon webservices, nonSQL databases, common 3rdparty APIs like Google Apps, Facebook...REST clients end framework, JSON...and there is a lot of good alternative sources too...get some open-source project example on Github (GIT is another mandatory tool to learn).
I particulary develop in Java now, Linux/MySQL/Tomcat on amazon AWS infra-structure, using Java-JSP for server and web client, and Java for Android..I just have to deal with Java environments and one language for Server (webserver and SO programs) and clients (web and mobile) development.
Well I hope I could help, I dont know if this is exactly the answer also if I made it clear cause my english is basic...
Well, have a nice weekend.
Leo

Isomorphism in an SPA consuming a REST service

I'm currently in the planning stages of a new project which is composed of a storefront, a highly reactive user dashboard, and the individual products being offered via the storefront being highly interactive mini-apps. We're trying to get away with making the entire platform a SPA and design the entire thing on a Flux architecture with React for the front-end views.
One issue, as with most SPAs, is SEO. I've prototyped an isomorphic solution based on the este.js dev stack. One issue is that our app consumes pretty much all of its data from a RESTful server, which is separate from the web server serving up the SPA. This means that the web server would need to fetch a considerable amount of data from the RESTful server, to isomorphically generate the HTML snapshot.
I've considered having a separate crawler process of my own crawl the entire storefront periodically and isomorphically generate HTML snapshots of the pages that could be served up when the web server encounters a search engine crawler. I'm not sure if this is a good approach though, as it would likely introduce additional maintenance and, frankly, seems a bit fragile. I could just have the web server isomorphically generate the HTML on the fly, but I fear bogging the server down for ordinary users as the server would be pulling considerable data from the REST API...
Is there a better way to handle such a case?
Check out Yahoo's Fetchr, an open-source library that allows you to isomorphically hit your API. It ties into Facebook's Flux architecture, so you need to have Stores, but at the very least you can glean some code and concepts from it. If you're in the planning phase, you might even consider going with the Flux or Fluxible.
http://fluxible.io/guides/data-services.html
https://github.com/yahoo/fetchr

How to effectively work with front-end web development adapted for back-end developers?

This is quite a debate we have at the moment between colleagues and I'm looking for fresh news ideas or suggestions. Where better than StackOverflow to ask!
We have web developers and back-end developers (PHP for Drupal or JSP for other platforms) and we used to develop a working static HTML/CSS/JS prototype and handed it to back-end developers to integrate.
However, we end up having issues where they have to split the static prototype to fit their different JSP/PHP pages and some bugs surfaces. We then have to double check their integration and squash the bugs.
I'm wondering if there's a way to create, deconstruct the static prototype to be easier to integrate for back-end developers? Maybe a way to split files and use SHTML includes to map the back-end? I'm just throwing ideas...
What do you think?
The terms web developer and backend developer are not clearly defined. This is partly due, in my opinion, to the templating technologies used (PHP, JSP, etc.) which encourage this problem. We talk of front-end and back-end developers but don't consider front-end and back-end applications.
I'm wondering if there's a way to create, deconstruct the static
prototype to be easier to integrate for back-end developers?
Why?
I think the better solution is to have back-end developers be just that, back-end developers. Why are you giving a presentation template to a back-end developer (I know, it's because you're using a templating technology such as PHP, JSP, etc.)?
If you really want to fix this problem you've got to separate these rolls by ditching the templating technologies and adopt a RESTful approach. Allow your back-end developers to only develop server-side code. Allow your front-end developers to only develop client-side code. Let the user interface designers provide a static prototype to the client developer who will make rest api calls to get the data needed to populate the static prototype. Then the back-end developer won't ever have to touch a piece of the client-side presentation.
Doing this will allow you to have multiple clients (web, mobile, etc.) using the same RESTful services.
See this SO Question/Answer for more on RESTful web services.

What does make up an applicaion (in traditional sense) in SharePoint? [Do not mix up with Web Application]

[NOTE: I am not using word 'Application' to mean what is called a 'Web Application' in SharePoint terminology. Word 'Application' is used in general sense.]
In mainstream application development platforms (like ASP.NET, Java EE) there is clear concept of an application and application boundaries.
What a SharePoint application is made up of? Sites? Lists? Features? Libraries?
A SharePoint solution can include more than one Features. Can a set of related Features be called an application? Is there a way to define what Features are related or inter-dependent?
This is not just a theoretical question. Boundary around application are needed for measuring resource utilization, controlling access, assuring SLAs (performance, availability etc.), change control, application ownership, application life-cycle management and more.
One definition can be based on hosting location. Is it hosted on SharePoint Server? Server side, it could be a solution build on SharePoint object model; client side could be based on client object model, SOAP web srevices or WCF services. Further, an application build on these paradigms could be a web, windows or console application or a web service. Performance and availability depends on host variable too.
In SharePoint there is a clear concept of boundaries, depending on your classifications and definitions. Your confusion stems from compairing technologies with product. ASP.NET, J2EE are technologies. SharePoint is a product built on a stack of technologies. Any large scale product built on many underlying technologies is no different from SharePoint.
From dev point of view boundaries could be around representation of data or management of content or both - a direct derivative of scope of your solution. Inter-dependency of features, customisations does not constitute part of one application alone. Extending SharePoint could involve dependency on existing feautures or building new ones. It is designers prerogative to define boundaries based on scope and whether to reuse existing functionality. My definition of an application would be a business case and a technical solution.
You didn't clariy what kind of resource utilisation you want to measure, it is instrumentation or project management? Change management is part of project management for development efforts. I am not even talking about Services here. In this sense any custom solution that aims to modify the default or current customised deployment of SharePoint will have a boundry defined by the changes it is bringing in.

Security and Policy Injection Application Block

I have a mixed UI (Win App, WPF App, and soon an ASP.NET MVC App) setup, so far I'm using Client Application Services for security. I know how to programmatically get a user authenticated and doing so is working beautifully. However...
I want to implement some cross cutting that basically checks to see if the user is authenticated all the time. Since everything will be accessing web services I want to enable this as a standard execution for pretty much everything the UI does. So far I'm thinking the PIAB - Policy Injection Application Block - will serve that function. What I'm wondering is two things;
1 Will the PIAB cover that needed functionality? Verifying authentication at every practical step if used against the UI?
...and...
2 Are there alternatives out there besides the PIAB? I'm curious to do a comparison of aspect oriented policy injection frameworks.
I'm not really familiar with Client Application Services but from my experience, most AOP frameworks wrap interfaces in order to implement the cross-cutting functionality. If CAS uses interfaces, you could probably just wrap them with what ever functionality you require.
Alternative AOP frameworks:
Spring.NET
Castle Dynamic Proxy
Spring.NET and Dynamic proxy seem to work in much the same way and have much the same performance in my Hello World type tests (about half-way between direct calls and invoking through reflection). PIAB is significantly slower than both these frameworks and I found bit more verbose. It does have the ability to be configurable via xml and I'm not sure if that's a good thing or not. Not sure if the other frameworks provide that. It does of course have the MS stamp of approval though :P.

Resources