Code Correctness, Readability, Maintainability Telerik Software Academy Telerik School.
Learning & Development Telerik Software Academy.
-
Upload
magdalen-griffin -
Category
Documents
-
view
226 -
download
0
Transcript of Learning & Development Telerik Software Academy.
![Page 1: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/1.jpg)
Node.js View Engines
Learning & Developmenthttp://academy.telerik.com
Telerik Software Academy
![Page 2: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/2.jpg)
Table of Contents View Engines
Overview
Client-side view engines KendoUI, Mustache.js, AngularJS
Server-side view engines Jade
![Page 3: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/3.jpg)
View Engines
![Page 4: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/4.jpg)
View Engines
View engine (template engine) is a framework/library that generates views
Using a programming language Web view engines are a mix-up of HTML and JavaScript Given a template/view JavaScript
generates a valid HTML code
![Page 5: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/5.jpg)
JavaScript View Engines There are lots of JavaScript view engines, and they can be separated into client and server Client: KendoUI, mustache.js,
jQuery, AngularJS, etc.
Server: Jade, HAML, EJS, Vash, etc.
Why use view engines? Speed-up developer performance
and easify the writing of HTML code
Auto generate DOM elements and make manual DOM manipulation almost useless
![Page 6: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/6.jpg)
Client View EnginesKendoUI, AngularJS, mustache.js
![Page 7: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/7.jpg)
Client View Engines Client view engines (templates) are used to parse data The data is sent over HTTP
The data is either raw JSON, XML or plain text
Server view engines parse the data on the server The client (browser) receives the
read-to-use HTML
![Page 8: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/8.jpg)
Templates with mustache.js
mustache.js is a library for creating client-side templates
mustache.js supports: One-time value-binding to
JavaScript objects
Iteration over a collection of elements
Conditional templates
![Page 9: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/9.jpg)
mustache.js: Example
Generates a list with all mustache types
var model = { title: 'Hello mustache!', types: ['Hungarian', 'Dali', 'Imperial', …]}
<h1>{{title}}</h1><ul class="mustaches-list">{{#types}} <li> <input name="mustaches[]" id="mustache-{{.}}" type="radio" value="{{.}}" /> <label for="mustache-{{.}}"> {{.}} </label> </li>{{/types}}
All binding is done inside {{ }} <- Template
JavaScript <-
![Page 10: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/10.jpg)
mustache.jsLive Demo
![Page 11: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/11.jpg)
KendoUI Templates KendoUI templates are part of the KendoUI framework Can be found in kendo.core.js
KendoUI supports: One-time value-binding to
JavaScript objects
Iteration over a collection of elements
Conditional templates
![Page 12: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/12.jpg)
KendoUI Templates: Example
Generates a table of technologies<h1>#: title #</h1><table> # for (var i = 0; i < technologies.length; i+=1) { #
<tr> <td><input type='checkbox' id="technology-#: i #" /></td> <td><label for="technology-#: i #"> #: technologies[i].name # </label> </td></table>var model = { title: 'Technologies', technologies: [{ name: 'ASP.NET', field: 'web' }, { name: 'Node.js', field: 'web' }, { name: 'WPF', field: 'windows desktop' }, { name: 'Android', field: 'mobile' }]};
![Page 13: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/13.jpg)
KendoUI TemplatesLive Demo
![Page 14: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/14.jpg)
AngularJS Templates AngularJS templates are a part of the Core AngularJS framework They actually represent views for
controllers
AngularJS supports: Two-way data and event binding to
JS objects
Iteration over a collection of elements
Conditional templates
![Page 15: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/15.jpg)
KendoUI Templates: Example Generates a slide of images
<div id="wrapper" ng-controller="ImagesController"> <div class="slider"> <strong>{{currentImage.title}}</strong> <img ng-src = "{{currentImage.src}}" width=800 /> <ul class="slider-images-list"> <li ng-repeat="image in images"> <img ng-src="{{image.src}}" ng-click="changeCurrent(image)"/> </li> </ul> </div></div>
app.controller('ImagesController', function ($scope) { $scope.images = [{title: 'QA Academy 2012/2013 Graduation', src: 'imgs/9511183282_cbe735bb73_c.jpg'} … ] $scope.currentImage = $scope.images[0]; $scope.changeCurrent = function(image){ $scope.currentImage = image; };});
![Page 16: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/16.jpg)
AngularJS TemplatesLive Demo
![Page 17: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/17.jpg)
Server View Engines
![Page 18: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/18.jpg)
Server View Engines
Server view engines return ready-to-use HTML to the client (the browser) They parse the data to HTML on the
server
*Web applications, created with server view engines are not real SPA apps In most cases
![Page 19: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/19.jpg)
Jade Template Engine Jade is a server view engine
Produces HTML as a result Can be parsed:
Manually (using CMD/Terminal commands)
Automatically using a task runner
Automatically using framework like Express
Jade is more expressive and dynamic than HTML Jade template can be parsed based
on JS models or conditionals
![Page 20: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/20.jpg)
Using Jade Install Jade with Node.js:$ npm install jade -g
Create the index.jade file:ul each val in [1, 2, 3, 4, 5] li= 'Item ' + val
Run: $ jade index.jade
Generates index.html with content:<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li></ul>
![Page 21: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/21.jpg)
Using JadeLive Demo
![Page 22: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/22.jpg)
Jade Features: Tags Omit the opening and closing tags
Even their brackets IDs and classes are set as in CSS
selectors #id and .classdiv#wrapper table.special tr th Header 1 th Header 2 tr td Data 1 td Data 2
<div id="wrapper"> <table class="special"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table></div>
Is parsed to
![Page 23: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/23.jpg)
Jade Features: Attributes
Attribites are written inside '(' and ')' And separated with commas ','#wrapper header h1#logo a(href='...') img(src='…') nav#main-nav: ul li.nav-item a(href='…')
<div id="wrapper"> <header> <h1 id="logo"> <a href="..."> <img src="..."/> </a> </h1> <nav id="main-nav"> <ul> <li class="nav-item"> <a href="...">...</a> </li> </ul> </nav> </header></div>
Is parsed to
![Page 24: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/24.jpg)
Jade FeaturesLive Demo
![Page 25: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/25.jpg)
Jade Models Jade can generate markup, using data models i.e. given an array of items, put
them into a table #wrapper header h1#logo a(href='...') = title nav#main-nav: ul each item in nav li.nav-item a(href= item.url) = item.title
<div id="wrapper"> <header> <h1 id="logo"> <a href="...">Lorem ipsum</a> </h1> <nav id="main-nav"> <ul> <li class="nav-item"> <a href="#home">Home</a> </li> <li class="nav-item"> <a href="#about">About</a> </li> </ul> </nav> </header></div>
Is parsed to
![Page 26: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/26.jpg)
Jade ModelsLive Demo
![Page 27: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/27.jpg)
Running Script in Jade Jade can contain conditionals, loops, etc… And the HTML is generated based on
the modelif condition h1.success | Fulfilled! else h1.error | Not fullfilled
model = { condition: true}
<h1 class="success"> Fulfilled! </h1>
model = { condition: false}
<h1 class="error"> Not fulfilled! </h1>
![Page 28: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/28.jpg)
Scripts in JadeLive Demo
![Page 29: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/29.jpg)
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезания
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно
?
? ? ??
?? ?
?
?
?
??
?
?
? ?
Questions?
?
View Engines
http://academy.telerik.com
![Page 30: Learning & Development Telerik Software Academy.](https://reader036.fdocuments.in/reader036/viewer/2022081506/56649dc65503460f94aba91a/html5/thumbnails/30.jpg)
Homework1. Create a simple web site for buying
mobile devices Create the following pages and put them
into nav Home -> contains greeting and site
information
Smart phones -> contains a list of smartphones
Tablets -> contains a list of tablets
Wearables -> contains a list of wearables
All pages must have the same header, navigation and footer
Use Jade and Jade Layouts
Use the each directive to create the navigation