Tips and Tricks in a world of Mix

 

You can check out the series of the posts on the subject

SPA 4–Camper Camper– Surfacing JSON Data with ASP.NET Web API Code – JOHN PAPA
SPA 6 – SPA Basics – Separating the Ravioli – Code Camper

image

Preload to prevent additional calls

Reloading on the client different sections of content while staying on the client

 

Best Practices

 

image

 

HTML5 BOILERPLATE

image

 

So the best practise for js reference is

image

  • leaving the HTTP HTTPS area empty to make it take the file from either of protocols
  • enter the version as a sub folder – the formation online as it located
  • add the local version of the file in case it’s not found(important to have that local file available , for the case) For instance jQuery cdn library .When downloaded HTML5 BoilerplateGet the index.html into VSSets different classes per type of browser
       1: <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

       2: <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->

       3: <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->

       4: <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

     
    Reading chars as they are
       1: <meta charset="utf-8">

    Trying to set the right view for devices by their size of the screen.(responsive design)

       1: <meta name="viewport" content="width=device-width">

    css rendered before allmodernizr is the only reference to js we”ll put at the headadded the cdn automatically for us

       1: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
       1:  

       2:     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')

    </script>

    all the JavaScript  files added at the end to not hold the html rendering of the page

      Web Optimization

    image

      Must allow optimization in web.config
         1: <!--Toggle "compilation debug" to false to activate bundling/minification-->

         2:    <compilation debug="false" targetFramework="4.5" />

        Minify –  the scripts are getting smaller  , extra spaces remark and etc. are removed.
      Bundling        if you have 40 javascript files it also unreadable and hits 40 requests to get the code from server to client – do it once with bundle uniting all to one request and sets the chaous to order

    image

      So the bundles are starting from Global.asax with
         1: BundleConfig.RegisterBundles(BundleTable.Bundles);

    And defined at App_Start folder

       1: // Force optimization to be on or off, regardless of web.config setting

       2:            //BundleTable.EnableOptimizations = false;

       3:            bundles.UseCdn = false;

     

    ScriptBundle – without the version it makes it louse from the version

       1: // Modernizr goes separate since it loads first

       2:  bundles.Add(new 

       3:   ScriptBundle("~/bundles/modernizr") 

       4:    .Include("~/Scripts/lib/modernizr-{version}.js"));

    you can and should include all your scripts as one folder

       1: // All application JS files (except mocks)

       2: bundles.Add(new 

       3:   ScriptBundle("~/bundles/jsapplibs")

       4:    .IncludeDirectory("~/Scripts/app/", "*.js", searchSubdirectories: false));

     

    Style Bundle

       1: // 3rd Party CSS files

       2: bundles.Add(new 

       3: StyleBundle("~/Content/css").Include(

       4:  "~/Content/boilerplate-styles.css",

       5:  "~/Content/toastr.css",

       6:  "~/Content/toastr-responsive.css"));

     

    Regular Transform for LESS styling

       1: // Custom LESS files

       2:  bundles.Add(new Bundle("~/Content/Less", 

       3:            new LessTransform(),  

       4:            new CssMinify())

       5:           .Include("~/Content/styles.less"));

    LessTransform is the translation class from Less to Css .

       1: public class LessTransform : IBundleTransform

       2:  {

       3:  public void Process(BundleContext context, BundleResponse response)

       4:  {

       5:      response.Content = dotless.Core.Less.Parse(response.Content);

       6:       response.ContentType = "text/css"; 

       7:   }

       8: }

     

    Now we can see that the number of approaches are fewer and it’s all in bundles

     

    image

     

    image

    You can check out the series of the posts on the subject

    SPA 4–Camper Camper– Surfacing JSON Data with ASP.NET Web API Code – JOHN PAPA
    SPA 6 – SPA Basics – Separating the Ravioli – Code Camper

    Comments on: "SPA 5– Code Camper – Web Optimization" (1)

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

    Tag Cloud

    %d bloggers like this: