<h1 id="javascript-applications">JavaScript-Applications</h1>
<p>JavaScript Applications Course Repository</p>
<p>The <strong>JavaScript Applications</strong> course introduces first steps for build web front-end application, using a back-end server (Node.js/Business clouds/etc…). The topics covered include HTTP, AJAX (both native and with frameworks), asynchronous paradigms using callbacks and promises and more…</p>
<p>All homeworks for the course are test-driven, i.e. each task has a predefined set of unit tests. <a href="https://github.com/TelerikAcademy/JavaScript-UI-and-DOM/blob/master/README.md#user-content-preparing-the-local-machine-for-unit-testing-with-mocha-and-chai">Here</a> you can find information how to setup your machine for local testing</p>
<h2 id="course-program">Course Program</h2>
<h4 id="course-introduction-view-online">1. Course Introduction (view online)</h4>
<ul>
<li><p>Examination</p></li>
<li><p>Trainers</p></li>
<li><p>Course program</p></li>
<li><p>Tools needed for the course</p>
<ul>
<li><p>Code Editors: Sublime text/Atom.io/Visual Studio Code/Web Storm</p></li>
<li><p>Platforms: Node.js and JavaScript IO</p></li>
<li><p>Servers: Microsoft IIS, WAMP, MAMP, XAMPP</p></li>
</ul></li>
</ul>
<h4 id="best-practices-for-writing-javascript-view-online">2. Best practices for writing JavaScript (view online)</h4>
<ul>
<li><p>Naming in JavaScript</p></li>
<li><p>Global scope</p></li>
<li><p>What is the value of <code>this</code>?</p></li>
<li><p>Function and “block” scopes</p>
<ul>
<li><p><code>var</code> and <code>let</code></p></li>
</ul></li>
<li><p><code>use strict</code></p></li>
<li><p>JavaScript Execution</p></li>
</ul>
<h4 id="amd-and-systemjs-view-online">3. AMD and SystemJS (view online)</h4>
<ul>
<li><pre><code>[Asynchronous Module Definition (AMD)](https://github.com/amdjs/amdjs-api/blob/master/AMD.md)</code></pre></li>
<li><p>Creating modules with <a href="https://github.com/systemjs/systemjs">SystemJS</a></p></li>
<li><p>Loading modules</p></li>
<li><p>Creating dependencies</p></li>
<li><p>Supported types of modules</p></li>
</ul>
<h4 id="underscore.js-overview-view-online">4. Underscore.js Overview (view online)</h4>
<ul>
<li><p>What is <a href="http://underscorejs.org">Underscore.js</a>?</p></li>
<li><p>Collections and Array extensions:</p>
<ul>
<li><p><code>_.map()</code>, <code>_.each()</code>, <code>_.pluck()</code>, <code>_.sortBy()</code>, <code>_.groupBy()</code>, <code>_.first()</code>, <code>_.last()</code> etc…</p></li>
</ul></li>
<li><p>Function extensions:</p>
<ul>
<li><p><code>_.memoize()</code>, <code>_.compose()</code></p></li>
</ul></li>
<li><p>Object extensions:</p>
<ul>
<li><p><code>_.keys(obj)</code>, <code>_.values(obj)</code>, <code>_.extend(obj, props)</code></p></li>
</ul></li>
<li><p>Utility functions:</p>
<ul>
<li><p><code>_.times(count, callback)</code>, <code>_.mixin(obj)</code></p></li>
</ul></li>
<li><p>Templates</p></li>
<li><p>Chaining</p></li>
</ul>
<h4 id="web-storages-view-online">5. Web Storages (view online)</h4>
<ul>
<li><p><code>localStorage</code></p></li>
<li><p><code>sessionStorage</code></p></li>
<li><p><code>cookies</code></p></li>
<li><p>Polyfills for <code>localStorage</code> and <code>sessionStorage</code></p></li>
</ul>
<h4 id="promises-and-asynchronous-programming-view-online">6. Promises and asynchronous programming (view online)</h4>
<ul>
<li><p>Async programming</p></li>
<li><p>Callbacks</p></li>
<li><p>Promises</p>
<ul>
<li><p>Native with polyfill</p></li>
<li><p>Using a library: Bluebird, RSVP, Q</p></li>
</ul></li>
<li><p>Async operations with ES 2015 function generators</p></li>
</ul>
<h4 id="http-and-ajax-view-online">7. HTTP and AJAX (view online)</h4>
<ul>
<li><p>What is HTTP?</p></li>
<li><p>Request-response model</p></li>
<li><p>HTTP Methods</p></li>
<li><p>HTTP request:</p>
<ul>
<li><p>Headers</p></li>
<li><p>Body</p></li>
<li><p>Methods</p></li>
</ul></li>
<li><p>HTTP response</p>
<ul>
<li><p>Headers</p></li>
<li><p>Body</p></li>
</ul></li>
<li><p>AJAX</p>
<ul>
<li><p>AJAX principle</p></li>
<li><p>Performing AJAX</p></li>
<li><p>Types of data</p>
<ul>
<li><p>HTML, XML/RSS, plain text, JSON</p></li>
</ul></li>
</ul></li>
</ul>
<h4 id="consuming-web-services-and-ajax">8. Consuming web services and AJAX</h4>
<ul>
<li><p>Creating HTTP requests using:</p>
<ul>
<li><p>Native JavaScript</p></li>
<li><p>jQuery.ajax</p></li>
</ul></li>
<li><p>Build UI based on received data from a web service</p></li>
</ul>
<h4 id="business-clouds-for-persistent-data">9. Business clouds for persistent data</h4>
<ul>
<li><p>Creating an application with a ready-to-use server</p></li>
<li><p>Samples:</p>
<ul>
<li><p><a href="http://www.telerik.com/backend-services">Telerik Backend Services</a></p></li>
<li><p><a href="https://www.parse.com/">Parse</a></p></li>
<li><p><a href="http://azure.microsoft.com/en-us/services/app-service/mobile/">Microsoft Mobile App Services</a></p></li>
</ul></li>
</ul>
<h4 id="unit-testing-with-mocha-chai">10. Unit testing with Mocha &amp; Chai</h4>
<ul>
<li><p>Setup of Mocha and Chai</p></li>
<li><p><a href="https://mochajs.org/#reporters">Mocha reporters</a></p></li>
<li><p>Unit testing DOM</p>
<ul>
<li><p>With <a href="https://github.com/tmpvar/jsdom">jsdom</a></p></li>
<li><p>With <a href="http://phantomjs.org/">PhantomJS</a></p></li>
</ul></li>
<li><p>Setting up Mocha with Karma</p></li>
<li><p>Spy objects and mocking</p></li>
<li><p>Code coverage with <a href="https://github.com/gotwarlost/istanbul">Istanbul</a></p></li>
</ul>
<h4 id="creating-simple-spa-applications-with-sammy.js-and-jquery">11. Creating Simple SPA applications with Sammy.js and jQuery</h4>
<ul>
<li><p>What is a SPA application?</p></li>
<li><p><a href="http://sammyjs.org/">Sammy.js</a> overview</p>
<ul>
<li><p>Creating routes</p>
<ul>
<li><p>i.e. ‘pages’</p></li>
</ul></li>
<li><p>Using Templates</p>
<ul>
<li><p>Handlebars, Mustache, etc…</p></li>
</ul></li>
</ul></li>
<li><p>Creating a simple SPA app using Sammy.js</p></li>
</ul>
<h4 id="app-architecture-workshop">12. App architecture workshop</h4>
<ul>
<li><p>Creating a complete web app with:</p>
<ul>
<li><p>Backend data from business cloud</p></li>
<li><p>AJAX</p></li>
<li><p>Handlebars.js, System.js, jQuery</p></li>
<li><p>Using promises</p></li>
</ul></li>
</ul>
<h4 id="exam-preparation">13. Exam preparation</h4>
<h4 id="teamwork-defense">14. Teamwork Defense</h4>
<h4 id="exam">15. Exam</h4>
<h2 id="preparing-the-local-machine-for-unit-testing-with-mocha-and-chai">Preparing the local machine for Unit testing with Mocha and Chai</h2>
<ul>
<li><p>Install <a href="https://iojs.org/en/index.html">JavaScript I/O</a></p>
<ul>
<li><p>Try if it is working by typing in CMD/Terminal <code>$ iojs -v</code> (should produce result)</p></li>
</ul></li>
</ul>
<h2 id="preparing-for-the-tests-for-each-homework">Preparing for the tests for each homework</h2>
<ul>
<li><p>Checkout the repository for the particular homework</p></li>
<li><p>Open CMD/Terminal and navigate to the checked-out repository with the homework</p></li>
<li><p>Run <code>npm install</code> in CMD/Terminal</p>
<ul>
<li><p>A folder <code>node_modules</code> should appear</p></li>
</ul></li>
<li><p>You are ready to run the tests</p></li>
</ul>
<h2 id="running-the-tests">Running the tests</h2>
<ul>
<li><p>Navigate to the folder of the particular homework in CMD/Terminal</p></li>
<li><p>Requirements:</p>
<ul>
<li><p>JavaScript files must be called task-1.js, task-2.js etc..</p></li>
<li><p>Each .js file must contain <code>module.exports=[name of the object/function]</code></p></li>
</ul></li>
<li><p>Run <code>npm test</code></p>
<ul>
<li><p>Test results should appear on the CMD/Terminal</p></li>
</ul></li>
</ul>
<h2 id="upload-in-bgcoder.com">Upload in BGCoder.com</h2>
<ul>
<li><p>Go to the specific homework</p></li>
<li><p>Select the task you will be sending</p></li>
<li><p>Wrap your result in:</p>
<pre><code>function solve() {
    return [your solution object/function];
}</code></pre></li>
</ul>