Bundling and Minification (Mind Map/ Summary)

 

Minification and bundling

Advertisements

When to use & Not to use SharePoint Framework

As for all there are black and white sides of this model as well same as web parts and add-in models. This article will be discuss good and bad of it.

Works for IoT (Internet of Things)

Modern tend is accessing internet from any device user equipped with such as mobile, tab, laptop, desktop and so on. Even modern SharePoint team sites are responsive there are loopholes. If your requirement is more mobility centric, this would be better option.

Users are still active with the legacy interface  

If in a requirement users are still active with the legacy application and finds improvement in the application while its up and running. Developing from the scratch or migrating would be more expensive idea such as in this context. So what you could do is develop client side with SharePoint framework which is future proofed and allowing user to work on both.

Need of long running operations and impersonation 

If you have the requirement to run long running operations, this is not ideal method to used with such as provisioning site in SharePoint since browsers does not allows to perform long hooks by default. And other thing is, if you need to perform tasks as administrator or with elevated privileges, this wont be a good idea.

Require high level of app data security 

This is all about client side development, means your data finally resides in the browser. If you are looking for higher degree of app data separation and provisioning, this may be not a better option.

Further, ups and downs will continue in later post. Until that, do explore on SharePoint framework.

What you should know about “SharePoint Framework”

SharePoint framework would give you the experience which you have developed solutions client side such as Angular, Ember, JQuery, Knockout or etc. TypeScript will give you thinner layer between the SharePoint server and client side framework but it also not a mandatory fact.

Decoupled

Since its loosely coupled with the SharePoint server, it will be easy us to make upgrades easy and do the maintenance on presentation layer. Also it allows us to integrate power of the modern client side frameworks with greater user experience.

All about client side scripts 

All resides on the clients browser and it will give the same behavior while your felt with client side web development. You may be must to scripts enabled on the browsers to consume this services. It will include the strengths of add-ins and frameworks.

Trust 

SharePoint framework would take your current browsers authentication to authenticate against the SharePoint server. Other than in web parts and in apps model, you wont equipped with authentication impersonation.

Independent hosting 

With the decoupled characteristic of the framework, you will be allowed to host your content where ever you want. It may be cloud, on-premise server, private host or any form hosting since you have access to URi’s of the SharePoint.

Extensible  

As Microsoft announce itself, this would be a extensible module for the SharePoint user experience. You will be totally free to include modern features such as responsive, nice animations, smart design architectures and so on on your preference. Rather than we develop within the boundaries of the template we get. This will be tend towards opening doors of open source.

Summary

Selecting to do your customization is more or less selecting best comparing competitive advantages. If you selected to develop on this some how, SharePoint would play the role of API.

XML Essentials [Episode One]

  • Download the PDF > XML essentials
    • eXtensible Markup Language
    • Tag based syntax, very much like HTML but not a replacement for it
    • Recommendation of W3C 1998
    • Base for several web technologies such as XHTML, AJAX, RSS/ATOM, Web services
    • Used for structure and describe data
    • Enables communicate between different systems and services
    • Hosts different related technologies such as XPath, XSLT, XQuey, XPointer/ XLink

    Advantages

    • Separates presentation layer
    • XML files can be read by many applications such as Java, .Net, PHP, JavaScript and etc.
    • Can be used with Server side and Client side

    Disadvantages

    • Not suitable for large data files (like 1GB of data)
    • Not suitable for image like data
    • JSON may be better solution for some cases other than XML

    Basics of XML

    • Elements Naming

    Can only start with hyphen (_) or with letter

    Rules of XML Syntax

    • Must have single root tag
    • Must well formed
    • Must have end tags
    • Attributes must inside quotes

    XML Namespaces

    • Prevents from different language tags conflicting with XML tags we defining
    • CDATA Section
      • Will not processed by XML parser
      • Used in cases like when we using some scripting codes inside
    • Processing Instructions
      • Special instructions to XML parser
      • Syntax – <?targetName instructions ?>

    Start Working on XML

    If you started with below and open with browser, It’ll ask for style information as below;

    <?xml version=”1.0″ encoding=”utf-8″ ?>

    <FirstTag>

    This is my First XML file

    <!– This is a comment in file –>

    </FirstTag>
    Then what you should do is adding style sheet to itas below

    <?xml version=”1.0″ encoding=”utf-8″ standalone=”no”?>

    <!–This must be at the top–>

    <?xml-stylesheet type=”text/css” href=”FirstXmlCss.css”?>

    <!–processin instructions to include stylesheet–>

    <FirstTag>

    This is my First XML file

    <!– This is a comment in file –>

    </FirstTag>

    Style sheet should be as follows

    /*this is CSS file for XML*/

    FirstTag {

    display:block;

    font-family:Arial;

    font-style:italic;

    color:green;

    }

     

    Document Object Model (DOM)

    • Platform, browser and language neutral
    • Represent content as tree structure
    • Uses to disaplay and manipulate XML data

    Eg:

    <html>

    <head>

    <title>This is title</title>

    </head>

    <body>

    <p>DOM explained</p>

    </body>

    </html>

    Properties of DOM

    For represent relationships

    For accessing and creating elements

    For accessing and removing properties

    References

Simple MVC project

simple mvc

MODELS


[1] CREATE USER MODEL
—————————–
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace _1___kushan.Models
{
public class User
{
public int ID { get; set; }
public string Name { get; set; }
}
}

[2] CREATE DB CONTEXT
———————

namespace _1___kushan.Models
{
public class Context : DbContext
{
public DbSet<Models.User> Users { get; set; }
}
}

CONTROLLER


[3] CREATE CONTROLLER
———————

using _1___kushan.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace _1___kushan.Controllers
{
public class UserController : Controller
{
//
// GET: /User/

public ActionResult Index()
{

return View();
}

//RESPONSE FOR SIMPLE BUTTON CLICK
[HttpPost]
public ActionResult Index(Models.User user)
{
Context con = new Context();//object with context
User u = new User//user model
{
Name = user.Name
};
con.Users.Add(u);//adding
con.SaveChanges();//writes to DB
return View();
}

}
}

VIEW


[4] GENERATE THE VIEW USING SCAFFOLDING
—————————————————–

@model _1___kushan.Models.User

@{
ViewBag.Title = “Index”;
}

<h2>Index</h2>

@using (Html.BeginForm(“Index”,”User”)) { <%–mention action & controller –%>
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>
<legend>User</legend>

<div class=”editor-label”>
@Html.LabelFor(model => model.Name)
</div>
<div class=”editor-field”>
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>

<p>
<input type=”submit” value=”Create” />
</p>
</fieldset>
}

<div>
@Html.ActionLink(“Back to List”, “Index”)
</div>

@section Scripts {
@Scripts.Render(“~/bundles/jqueryval”)
}