Front-end development introduction (JavaScript). Part 2

May 27, 2015Download as PPTX, PDF4 likes929 views

Presentation for NURE (Kharkiv National University of Radioelectronics) students about front-end development (JavaScript best practices, features).

FRONT-END DEVELOPMENT,
PART 2: JS
_by Oleksii Prohonnyi

Front-end development introduction (JavaScript). Part 2

Who am I
Oleksii Prohonnyi
Tech. lead @ Sigma Software
 4+ years in IT
 2 technologies
 13 mentees
 60+ interviews

Front-end development,
part 1: HTML/CSS
Presentation: http://goo.gl/so2uHP
Sources: https://goo.gl/Hef65u

JavaScript (also known as ECMAScript)
It is most commonly used as part of
web browsers, whose implementations
allow client-side scripts to interact with
the user, control the browser,
communicate asynchronously, and alter
the document content that is displayed.
<wikipedia.org>

ECMAScript
is the scripting language standardized
by Ecma International in the ECMA-262
specification and ISO/IEC 16262.
<wikipedia.org>

ECMAScript6
is a significant update to the language,
and the first update to the language
since ES5 was standardized in 2009.
More info: https://goo.gl/5xvio1

ES6 features
 arrows
 classes
 enhanced object literals
 template strings
 destructuring
 default + rest + spread
 let + const
 iterators + for..of
 generators
 unicode
 modules
 module loaders
 map + set + weakmap + weakset
 proxies
 symbols
 subclassable built-ins
 promises
 math + number + string + array +
object APIs
 binary and octal literals
 reflect api
 tail calls

How to deal with encapsulation in JS?
 “Imagined” privacy
 Private “static” methods (closures)
 Real private properties and methods
 Just don’t
 More info: http://goo.gl/uaYcHp

DEMO
(“src/ood” directory in sources [index.html, encapsulation.js])

DEMO
(“src/patterns” directory in sources [index.html?singleton])

DEMO
(“src/patterns” directory in sources [index.html?proxy])

More patterns implementations:
https://github.com/oprohonnyi/js_trn/tree/patterns

Grunt
 In one word: automation. The less work you have to do when
performing repetitive tasks like minification, compilation, unit testing,
linting, etc, the easier your job becomes.
 http://gruntjs.com/
 Installation: “npm install –g grunt-cli”
 Verify installation: “grunt --version”
 Configuration: package.json + Gruntfile.js

DEMO
(“tools/grunt” directory in sources)

More about coding guidelines:
http://www.slideshare.net/oprohonnyi/javascript-coding-guidelines

JSHint
 Tool that helps to detect errors and potential problems in your
JavaScript code.
 http://jshint.com/
 Configuration: .jshintrc
 Custom reporter: jshint-stylish

DEMO
(“tools/jshint” directory in sources)

More useful modules
 grunt-contrib-concat
 grunt-contrib-uglify
 grunt-contrib-htmlmin
 grunt-contrib-livereload
 grunt-recess
 grunt-processhtml
 grunt-jsdoc

DEMO
(try by yourself WebStorm IDE and grunt task runner)

References
 "JavaScript: The Good Parts" (Douglas Crockford)
 "Learning JavaScript Design Patterns" (Addy Osmani)
 "Effective JavaScript: 68 Specific Ways to Harness the
Power of JavaScript" (David Herman)
 "Clean Code: A Handbook of Agile Software
Craftsmanship" (Robert Martin)
 "Patterns of Enterprise Application Architecture" (Martin
Fowler)
 Presentation sources: github.com

Oleksii Prohonnyi
linkedin.com/in/oprohonnyi
slideshare.net/oprohonnyi

Front-end development involves building the elements of a website that users interact with directly. This document provides an overview of HTML, CSS, semantic markup, responsive design, and tools for front-end development. It defines HTML as the standard markup language for web pages and CSS as the style sheet language used to describe document formatting. Semantic HTML uses meaningful markup to reinforce content semantics rather than just presentation. Responsive design approaches like separate files or media queries allow content to adapt to different devices. Development tools like Chrome DevTools, WebStorm IDE, and Grunt help automate tasks.

Front-end technologies for Wonderful User Experience through WebsitesReady Bytes Software labs

Web Design & Development Courses in Pune| 3DOT Technologiesabeda786

Web development refers to building, creating, and maintaining websites and includes aspects such as web design, publishing, programming, and database management. A web developer's roles may include designing interfaces with HTML and CSS as well as writing scripts in languages like PHP and ASP and helping maintain databases for dynamic sites. HTML uses markup tags to tell browsers how to display web page words and images while CSS is used to describe presentation of pages, including colors, layouts, and fonts, allowing adaptation for different devices. JavaScript provides dynamic interactivity on websites and can be used to create games, graphics, and more complex applications. PHP is a server-side scripting language commonly used for web development along with frameworks like WordPress, which is a free

Web Design & Development Courses in Pune | 3DOT Technologiesabeda786

Web development involves building, creating, and maintaining websites. It includes aspects such as web design, web publishing, web programming, and database management. While web designers focus on designing interfaces using HTML and CSS, web developers may also write scripts using languages like PHP and ASP as well as help maintain databases for dynamic sites. HTML is the language used to describe web page structure and include headings, text, tables, lists, photos etc. CSS is used to describe how HTML elements are displayed and allows adapting presentation for different devices. JavaScript allows dynamic interactivity on websites, and PHP is a programming language often used for web development along with databases. WordPress is a popular open-source content management system built using PHP and MySQL that allows installing

3 dot technologies by deepak modiDeepak Modi

Web Design & Development Courses in Pune |Web Development Classes in Pune | ...abeda786

Web development refers to building, creating, and maintaining websites and includes aspects such as design, publishing, programming, and database management. While web designers focus on design using HTML and CSS, web developers are also involved in writing scripts in languages like PHP and ASP as well as maintaining databases. HTML uses markup tags to tell browsers how to display web pages, CSS is used to describe presentation of pages, JavaScript adds dynamic interactivity, PHP is a server-side scripting language, and WordPress is a free and open-source content management system based on PHP and MySQL.

html & css umesh patil

DIGIT Noe 2016 - Overview of front end development todayBojan Veljanovski

This document provides an overview of front-end development approaches, including traditional server-side rendering and modern single-page applications (SPAs). It discusses the evolution from traditional to SPA approaches, characteristics of SPAs like modularity and client-side rendering, and considerations for choosing between server-side and client-side solutions. The document also showcases GitHub.com and the Azure Portal as examples of applications that take hybrid approaches, with some modules behaving as traditional sites and others as fully-fledged SPAs.

Best Web Development Courses - Classes in Pune | Web Development Classes in ...Swati Pardeshi

Dream weaverlstar14

Dreamweaver is a web development application created by Adobe that allows users to design, build, and manage websites. It incorporates support for technologies like CSS, JavaScript, PHP, and more. Dreamweaver allows users to preview websites locally and use basic JavaScript without coding through its behaviors panel. The document also defines HTML and CSS, their roles in web development, and provides some useful sites for templates, tutorials, and references.

Introduction to Basic Concepts in WebJussi Pohjolainen

The document introduces some basic concepts of web application programming including HTTP, clients and servers, resources, requests and responses. HTTP is a stateless protocol used to transfer information on intranets and the World Wide Web. It defines request and response methods between clients and servers. Clients such as web browsers make HTTP requests to servers, which store and provide resources/files in response. Common resources are accessed via URLs. HTTP requests use methods like GET to retrieve representations of resources. A GET request involves opening a connection, sending the request, and reading the response. Responses contain header information and the requested resource. Standards like HTML, CSS, XML, and JavaScript are used to structure modern web documents and provide inter

Front-End DevelopmentHein Htet Aung

C languageomprakash810

Web deveplopment courses in puneNidhi Samdani

The document discusses web design and development courses offered in Pune, India. It defines key terms like web development, web designer, and web developer. While web designers focus on interfaces using HTML and CSS, web developers may also write scripts in languages like PHP and ASP and help maintain databases. The courses cover topics like PHP development, WordPress development, JavaScript, HTML, and CSS. 3 DOT Technologies is then described as a Pune-based website design and development company that offers services including website design, e-commerce applications, SEO, and maintenance.

Web development using javaScript, React js, Node js, HTML, CSS and SQLJayant Surana

Dream weaverwww.netgains.org

Web Development basics with WordPressRashna Maharjan

This document provides an overview of basics in web development including HTML, CSS, JavaScript, and WordPress. It discusses the structure and components of HTML, different HTML elements and tags, CSS syntax and selectors, uses of JavaScript, and an introduction to WordPress including why it is commonly used and the WordPress development process. The document aims to provide foundational knowledge on key web development technologies through explanations, examples, and a quiz.

Dream weaverTerry Murray

Web development classes in puneNidhi Samdani

Introduction to HTML5 and CSS3Chandra S Oemarjadi

27.1.2014, Tampere. Perinteinen mobiilimaailma murroksessa. Petri Niemi: Sing...Tieturi Oy

Single Page Applications - Desert Code Camp 2012Adam Mokan

The rise of single-page applicationsCaridy Patino

Single-page applications allow users to switch between different states without reloading the entire page. Isomorphic applications take this a step further by allowing the same application code to run on both the server and client, enabling server-side rendering for performance and SEO while retaining the benefits of a single-page app experience. The author introduces Modown, an open-source framework they developed that uses libraries and building blocks over opinions frameworks to help build isomorphic JavaScript apps that can run on both Node.js servers and in browsers.

An introduction in to the world of front end automation - frontend ne (02 07-15)frontendne

This document provides an introduction to task runners and automation for front-end development. It discusses how task runners can automate tasks like preprocessing, concatenation, minification, and live reloading. Popular task runners like Gulp and their plugins are explained. The document then provides a step-by-step example of using Gulp to automate Sass compilation, autoprefixing, and CSS minification for a project.

Front End Development Automation with GruntLadies Who Code

Grunt is a JavaScript task runner that can automate front-end development tasks like linting, compiling Sass files to CSS, running tests and watching for file changes. It provides plugins for common tasks and allows developers to define custom workflows. The document discusses how Grunt can be used to integrate and run various tasks like linting, Sass compilation and watching files. It also explains how to define tasks, configure Grunt and run tasks from the command line. Custom tasks can be created and shared as plugins. The document provides an example of using Grunt to convert Markdown files to the Leanpub format and sync them to Dropbox.

Single page applicationsRumesh Hapuarachchi

Single page applications (SPAs) are web applications that load all necessary content at once so that subsequent page changes do not require additional page loads, providing a more fluid user experience similar to a desktop application. SPAs use a combination of HTML, CSS, and JavaScript and are commonly built using frameworks like AngularJS, Ember.js, and Durandal. This document provides an overview of SPAs and discusses development tools and techniques for building SPAs using ASP.NET and common JavaScript frameworks.

More Related Content

What's hot (16)

html & css umesh patil

DIGIT Noe 2016 - Overview of front end development todayBojan Veljanovski

Best Web Development Courses - Classes in Pune | Web Development Classes in ...Swati Pardeshi

Dream weaverlstar14

Introduction to Basic Concepts in WebJussi Pohjolainen

Front-End DevelopmentHein Htet Aung

C languageomprakash810

Web deveplopment courses in puneNidhi Samdani

Web development using javaScript, React js, Node js, HTML, CSS and SQLJayant Surana

Dream weaverwww.netgains.org

Web Development basics with WordPressRashna Maharjan

Dream weaverTerry Murray

Web development classes in puneNidhi Samdani

Introduction to HTML5 and CSS3Chandra S Oemarjadi

html & css umesh patil

DIGIT Noe 2016 - Overview of front end development todayBojan Veljanovski

Best Web Development Courses - Classes in Pune | Web Development Classes in ...Swati Pardeshi

Dream weaverlstar14

Introduction to Basic Concepts in WebJussi Pohjolainen

Front-End DevelopmentHein Htet Aung

C languageomprakash810

Web deveplopment courses in puneNidhi Samdani

Web development using javaScript, React js, Node js, HTML, CSS and SQLJayant Surana

Dream weaverwww.netgains.org

Web Development basics with WordPressRashna Maharjan

Dream weaverTerry Murray

Web development classes in puneNidhi Samdani

Introduction to HTML5 and CSS3Chandra S Oemarjadi

Viewers also liked (20)

27.1.2014, Tampere. Perinteinen mobiilimaailma murroksessa. Petri Niemi: Sing...Tieturi Oy

Single Page Applications - Desert Code Camp 2012Adam Mokan

The rise of single-page applicationsCaridy Patino

An introduction in to the world of front end automation - frontend ne (02 07-15)frontendne

Front End Development Automation with GruntLadies Who Code

Single page applicationsRumesh Hapuarachchi

Js Automation. npm scripts & GulpAnton Dosov

This document discusses JavaScript build automation using NPM scripts and task runners like Gulp. It explains why build automation is useful, providing consistent and repeatable processes to compile code, run tests, and deploy applications. NPM scripts provide basic automation capabilities using shell commands, while task runners like Gulp allow composing complex build pipelines with parallel tasks using JavaScript. The document provides examples of NPM script and Gulpfile configurations for common build tasks like compilation, minification, testing and more.

Single page applicationsDiego Cardozo

This document provides an overview of single page applications (SPAs), including their motivation, introduction, examples, architecture, advantages and disadvantages, tools, and a demo. SPAs aim to improve user experience by only loading necessary content instead of entire pages when navigating a site. This reduces load times compared to traditional multi-page applications. The document discusses tools like Knockout.js that can be used to build SPAs and notes that server-side code moves to exposing RESTful APIs while client-side code handles navigation and UI logic. It concludes with advertising a demo of an SPA built with John Papa's Hot Towel template to further illustrate SPA concepts.

JAVA SCRIPTGo4Guru

This document provides an introduction to JavaScript by explaining what it is, how it differs from Java, how it works within web browsers to make pages interactive, and some common uses of JavaScript including form validation and manipulating HTML elements. It discusses how JavaScript code is embedded in HTML pages and executed on the client-side, and provides some simple examples of JavaScript statements and using JavaScript with HTML forms.

JavaScript IntroductionCharles Russell

Making Single Page Applications (SPA) faster Boris Livshutz

This document discusses strategies for improving the performance of single page applications (SPAs). It begins by introducing common SPA frameworks and trends. It then discusses challenges like framework overhead and constant reinstallation that can degrade performance. Solutions presented include light first visits using skeleton pages, server-side rendering, virtual DOM libraries, JavaScript packaging, resource deferral, caching optimizations, and monitoring SPA-specific metrics. The document emphasizes the importance of choosing the right framework, designing for performance, and testing SPAs using modern techniques.

An Introduction to JavaScript: Week OneEvent Handler

This document introduces JavaScript basics including expressions, conditionals, loops, functions, and objects. It covers numeric and string expressions, comparison operators, if/else statements, while and for loops. Functions are defined using both the function keyword and as variable assignments. Arrays can store multiple data types and values can be accessed or modified using indexes and length. Objects store key-value pairs and values can be accessed using dot notation or brackets.

An introduction to javascripttonyh1

This document provides an introduction to JavaScript. It discusses the purposes of JavaScript including making web pages interactive by responding to events and accessing information about the user's computer. It compares JavaScript to other languages like Java and PHP. The document then covers basic JavaScript syntax and constructs including variables, data types, operators, conditional statements, functions, and arrays. It provides examples of how to use many common JavaScript features.

JavaScript IntroductionDesignveloper

Single Page ApplicationsMassimo Iacolare

This document discusses Single Page Applications (SPAs) and the JavaScript framework Backbone.js. It defines SPAs as web apps that handle interactions on the client-side without needing to reach the server. The document discusses why SPAs are useful for providing a fluid user experience but can increase code complexity. It introduces Backbone components like Models, Collections, Views and the Router that help manage this complexity by enforcing structure and separating concerns. Examples are provided of how to decompose user interfaces into Views and use Backbone to encapsulate state, add routing, and follow best practices like view-model associations and event-driven communication between components.

Single page applicationJeremy Lee

The document discusses single page applications (SPAs) and the AngularJS framework. It defines SPAs as web apps that load on a single page to provide a more fluid user experience. It then explains key characteristics of SPAs and benefits like improved performance. The bulk of the document focuses on introducing concepts in AngularJS like controllers, scopes, templates, directives, filters, services and routing. It provides code examples to demonstrate basic usage and building a todo list app with AngularJS.

01 Introduction - JavaScript DevelopmentTommy Vercety

This document provides an introduction to dynamic HTML (DHTML) and JavaScript development. It defines DHTML as a combination of HTML, CSS, and JavaScript that allows web pages to react and change in response to user actions. It discusses how JavaScript enables dynamic behavior and interactivity on web pages by handling events, modifying HTML elements and the DOM tree, and performing other tasks. It also covers common JavaScript concepts like functions, objects, and syntax as well as built-in browser objects and timers.

The JavaScript Programming LanguageRaghavan Mohan

The document provides an overview of the JavaScript programming language, including its history, key concepts, values, operators, statements, and objects. It discusses JavaScript's misunderstood nature due to its name, design errors in early implementations, and use in browsers. Some key points made include: JavaScript is a functional language; it uses prototypal inheritance instead of classes; all values are objects except for primitive values; and functions are first-class objects that can be assigned and passed around.

Building single page applicationsSC5.io

A Lecture given in Aalto University course "Design of WWW Services". Single page app is already several years old web application paradigm that is now gaining traction due to the interest towards HTML5 and particularly cross-platform mobile (web) applications. The presentation overviews the single page application paradigm and compares it with other web app paradigms. The presentation uses Backbone.js as the sample and gives practical tips on how to best structure Backbone.js applications. It contains an extensive set of tips and links in the notes section. The reader is adviced to download the presentation for better readability of the notes.

introduction to javascriptKumar

27.1.2014, Tampere. Perinteinen mobiilimaailma murroksessa. Petri Niemi: Sing...Tieturi Oy

Single Page Applications - Desert Code Camp 2012Adam Mokan

The rise of single-page applicationsCaridy Patino

An introduction in to the world of front end automation - frontend ne (02 07-15)frontendne

Front End Development Automation with GruntLadies Who Code

Single page applicationsRumesh Hapuarachchi

Js Automation. npm scripts & GulpAnton Dosov

Single page applicationsDiego Cardozo

JAVA SCRIPTGo4Guru

JavaScript IntroductionCharles Russell

Making Single Page Applications (SPA) faster Boris Livshutz

An Introduction to JavaScript: Week OneEvent Handler

An introduction to javascripttonyh1

JavaScript IntroductionDesignveloper

Single Page ApplicationsMassimo Iacolare

Single page applicationJeremy Lee

01 Introduction - JavaScript DevelopmentTommy Vercety

The JavaScript Programming LanguageRaghavan Mohan

Building single page applicationsSC5.io

introduction to javascriptKumar

Similar to Front-end development introduction (JavaScript). Part 2 (20)

Alfresco Development Framework BasicMario Romano

The Alfresco Development Framework (ADF) provides over 100 reusable Angular components and services, development tools to streamline building applications, and is based on standard technologies like Angular and Material Design; it has four pillars including the JavaScript library, Angular components, app generator, and example apps; and the framework core utilizes technologies like JavaScript, HTML5, CSS, TypeScript, Angular, and development tools like Node, NPM, and GitHub.

.NET Recommended ResourcesGreg Sohl

Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...Doris Chen

Powerful tools for building web solutionsAndrea Tino

Selenium & PHPUnit made easy with Steward (Berlin, April 2017)Ondřej Machulda

Sergey Ilinsky Presentation Ample SdkAjax Experience 2009

The document discusses Ample SDK, a standards-based GUI framework for building client-side applications. Ample SDK runs transparently between the browser and application, providing standard cross-browser access to the user interface. It allows building application UIs using XML languages like XHTML, XUL and SVG. Styling is done with CSS. Logic is implemented with JavaScript. The programming model is similar to building applications directly in the browser.

Plugins 2.0: The Overviewmrdon

State ofappdevelopmentgillygize

Introduction To Eclipse RCPwhbath

Normalizing x pages web development Shean McManus

GOSIM 2024 - GenUI: Declarative Rust Cross-platform Framework Based on MakepadGOSIM Foundation

Where's the source, Luke? : How to find and debug the code behind PloneVincenzo Barone

Plone, being a python based CMS written as a project for the Zope application server, consist almost entirely of python modules and a number of configuration files. Python source code is loved by many in the community for its explicit readablity; however, for many experienced software developers, coming over to the Plone technology stack can be a haunting experience. It seems everything is hidden away as pickled object in the ZODB, and that layers of magic prevent one from understanding how it works and how to affect change. This presentation will explain to the novice: - how to track down the python source behind Plone - how to take advantage of rich open source tools like ctags and pdb - best practices for getting started with file system product development

API Doc SmackdownTed Husted

The Yahoo UI (YUI) Library is well known for its excellent documentation. One of its secrets is YUI Doc, a Python application used at build time to generate API documentation for JavaScript code. But is YUI Doc really better than JS Doc Toolkit -- an elder application, written in JavaScript, that also generates API documentation. When should you choose one over the other? Which is the better choice for your project?

Tutorial 1: Your First Science App - Araport Developer WorkshopVivek Krishnakumar

eXo Platform SEA - Play Framework Introductionvstorm83

Ember.js - Jak zatopit a neshořet!Viliam Elischer

Mastering Test Automation: How To Use Selenium SuccessfullySpringPeople

In this slide, identify what to test and choose the best language for automation. Learn to write maintainable and reusable Selenium tests and add UI layout test as part of automation using Galen framework. This slide will also guide you in reporting structure by using external plugin's, an illustration covering cross browser testing (Running selenium grid with Docker) and explain Code repository (Git) and Jenkins CI tool.

CucumberSeleniumWDVikas Sarin

The document provides an overview of Behavior Driven Development (BDD) and the Cucumber testing framework. It discusses why teams adopt BDD, what BDD and Cucumber are, and how to set up the Cucumber environment and write feature files using its Gherkin language. Key points covered include that BDD focuses on specifying and testing desired user behaviors, Cucumber serves as documentation, tests, and an aid using plain text scenarios, and the environment setup shows installing Java, Eclipse, Maven, and adding Cucumber dependencies to create and run feature files.

Hands on web development with play 2.0Abbas Raza

This document discusses the Play web framework and provides an overview of its key features and benefits. It then outlines a plan to build a sample application from scratch to demonstrate Play's capabilities. The application aims to validate a problem before building a product, in line with the Lean Startup methodology. The session concludes with references for further reading on Play and web development.

AD113 Speed Up Your Applications w/ Nginx and PageSpeededm00se

Alfresco Development Framework BasicMario Romano

.NET Recommended ResourcesGreg Sohl

Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...Doris Chen

Powerful tools for building web solutionsAndrea Tino

Selenium & PHPUnit made easy with Steward (Berlin, April 2017)Ondřej Machulda

Sergey Ilinsky Presentation Ample SdkAjax Experience 2009

Plugins 2.0: The Overviewmrdon

State ofappdevelopmentgillygize

Introduction To Eclipse RCPwhbath

Normalizing x pages web development Shean McManus

GOSIM 2024 - GenUI: Declarative Rust Cross-platform Framework Based on MakepadGOSIM Foundation

Where's the source, Luke? : How to find and debug the code behind PloneVincenzo Barone

API Doc SmackdownTed Husted

Tutorial 1: Your First Science App - Araport Developer WorkshopVivek Krishnakumar

eXo Platform SEA - Play Framework Introductionvstorm83

Ember.js - Jak zatopit a neshořet!Viliam Elischer

Mastering Test Automation: How To Use Selenium SuccessfullySpringPeople

CucumberSeleniumWDVikas Sarin

Hands on web development with play 2.0Abbas Raza

AD113 Speed Up Your Applications w/ Nginx and PageSpeededm00se

More from Oleksii Prohonnyi (20)

Utility libraries to make your life easierOleksii Prohonnyi

Dive into Angular, part 4: Angular 2.0Oleksii Prohonnyi

This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular. Part 1 (Introduction): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-1-introduction Part 2 (Architecture): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-2-architecture Part 3 (Performance): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-3-performance Part 5 (Experience): https://www.slideshare.net/oprohonnyi/dive-into-angular-part-5-experience

Dive into Angular, part 5: ExperienceOleksii Prohonnyi

This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular. Part 1 (Introduction): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-1-introduction Part 2 (Architecture): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-2-architecture Part 3 (Performance): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-3-performance Part 4 (Angular 2.0): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-4-angular-20

Dive into Angular, part 3: PerformanceOleksii Prohonnyi

This document discusses techniques for optimizing AngularJS performance. It begins by explaining how to measure performance using Chrome Dev Tools, Batarang, and console.time. It then discusses minimizing watchers, binding once, using filters and caching, optimizing ng-repeat, ng-model, ng-if vs ng-show, and $$apply vs $$digest. The document provides examples and references for further reading on each topic. It concludes by assigning a homework task to intentionally degrade an application's performance and then optimize it using the techniques described.

Dive into Angular, part 2: ArchitectureOleksii Prohonnyi

This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular. Part 1 (Introduction): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-1-introduction Part 3 (Performance): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-3-performance Part 4 (Angular 2.0): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-4-angular-20 Part 5 (Experience): https://www.slideshare.net/oprohonnyi/dive-into-angular-part-5-experience

Dive into Angular, part 1: IntroductionOleksii Prohonnyi

This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular. Part 2 (Architecture): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-2-architecture Part 3 (Performance): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-3-performance Part 4 (Angular 2.0): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-4-angular-20 Part 5 (Experience): https://www.slideshare.net/oprohonnyi/dive-into-angular-part-5-experience

Cycle.js overviewOleksii Prohonnyi

Moment.js overviewOleksii Prohonnyi

Bower introductionOleksii Prohonnyi

JavaScript Presentation Frameworks and LibrariesOleksii Prohonnyi

This document compares several JavaScript presentation frameworks: Reveal.js, Impress.js, Google Slides Template (GST), Deck.js, and Shower. It provides information on their features such as support for CSS transitions, browser support, extensions, and PDF export capabilities. Reveal.js and Deck.js support the most features, including CSS transitions, extensions, and PDF export, while Impress.js focuses on CSS transitions and browser support.

Introduction to D3.jsOleksii Prohonnyi

Conference DotJS 2015 Paris reviewOleksii Prohonnyi

The document provides a review of the DOTJS 2015 conference in Paris. It summarizes that the conference is part of an annual series focused on JavaScript and related technologies. It attracted almost 1,000 participants and featured both short lightning talks and longer keynote speeches on topics like modern asynchronous JavaScript, peer-to-peer file sharing with Hyperdrive, memory management, HTTP/2, ES6 features, reactive programming with RxJS, WebRTC, template compilers, teaching kids to code, mobile optimization, and the future of WebAssembly.

Asm.js introductionOleksii Prohonnyi

Code review process with JetBrains UpSourceOleksii Prohonnyi

D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)Oleksii Prohonnyi

OpenLayer's basicsOleksii Prohonnyi

Front-end rich JavaScript application creation (Backbone.js)Oleksii Prohonnyi

This document provides an overview of front-end technologies for building rich JavaScript applications. It discusses HTML for creating web pages, CSS for styling, and JavaScript for interactivity. It also covers jQuery for simplifying DOM manipulation and Ajax, Backbone.js for building maintainable apps using the MVP pattern, and Underscore.js as a utility library. The document concludes with steps for building a basic Backbone app with models, views, and routing.

Как создать сайт за 2 часа? (Wordpress)Oleksii Prohonnyi

Презентация к выступлению на І Международной научно-практической конференции "Сотрудничество между университетами и предприятиями в ІТ-аутсорсинге (ICCUBITO 2013)" в Харьковском национальном университете радиоэлектроники (ХНУРЭ) Проект: Учебный Научно-Производственный Центр Аутсорсинга (УНПЦА) Дата: 18.06.2013 Город: Харьков

Разработка веб-сайта. Сайт. Зачем он?Oleksii Prohonnyi

Презентация к выступлению на круглом столе торгово-промышленной палаты Украины «IТ-аутсорсинг – новые возможности для Вашего бизнеса. Перспективы развития сотрудничества ВУЗов и предприятий Харькова» Проект: интернет-магазин "АВС-Медтехника" Дата: 12.12.2014 Город: Харьков

Google Chrome DevTools features overviewOleksii Prohonnyi

Utility libraries to make your life easierOleksii Prohonnyi

Dive into Angular, part 4: Angular 2.0Oleksii Prohonnyi

Dive into Angular, part 5: ExperienceOleksii Prohonnyi

Dive into Angular, part 3: PerformanceOleksii Prohonnyi

Dive into Angular, part 2: ArchitectureOleksii Prohonnyi

Dive into Angular, part 1: IntroductionOleksii Prohonnyi

Cycle.js overviewOleksii Prohonnyi

Moment.js overviewOleksii Prohonnyi

Bower introductionOleksii Prohonnyi

JavaScript Presentation Frameworks and LibrariesOleksii Prohonnyi

Introduction to D3.jsOleksii Prohonnyi

Conference DotJS 2015 Paris reviewOleksii Prohonnyi

Asm.js introductionOleksii Prohonnyi

Code review process with JetBrains UpSourceOleksii Prohonnyi

D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)Oleksii Prohonnyi

OpenLayer's basicsOleksii Prohonnyi

Front-end rich JavaScript application creation (Backbone.js)Oleksii Prohonnyi

Как создать сайт за 2 часа? (Wordpress)Oleksii Prohonnyi

Разработка веб-сайта. Сайт. Зачем он?Oleksii Prohonnyi

Google Chrome DevTools features overviewOleksii Prohonnyi

Recently uploaded (20)

apa-style-referencing-visual-guide-2025.pdfIshika Ghosh

Title: A Quick and Illustrated Guide to APA Style Referencing (7th Edition) This visual and beginner-friendly guide simplifies the APA referencing style (7th edition) for academic writing. Designed especially for commerce students and research beginners, it includes: ✅ Real examples from original research papers ✅ Color-coded diagrams for clarity ✅ Key rules for in-text citation and reference list formatting ✅ Free citation tools like Mendeley & Zotero explained Whether you're writing a college assignment, dissertation, or academic article, this guide will help you cite your sources correctly, confidently, and consistent. Created by: Prof. Ishika Ghosh, Faculty. 📩 For queries or feedback: [email protected]

Ultimate VMware 2V0-11.25 Exam Dumps for Exam SuccessMark Soia

SCI BIZ TECH QUIZ (OPEN) PRELIMS XTASY 2025.pptxRonisha Das

To study the nervous system of insect.pptxArshad Shaikh

The *nervous system of insects* is a complex network of nerve cells (neurons) and supporting cells that process and transmit information. Here's an overview: Structure 1. *Brain*: The insect brain is a complex structure that processes sensory information, controls behavior, and integrates information. 2. *Ventral nerve cord*: A chain of ganglia (nerve clusters) that runs along the insect's body, controlling movement and sensory processing. 3. *Peripheral nervous system*: Nerves that connect the central nervous system to sensory organs and muscles. Functions 1. *Sensory processing*: Insects can detect and respond to various stimuli, such as light, sound, touch, taste, and smell. 2. *Motor control*: The nervous system controls movement, including walking, flying, and feeding. 3. *Behavioral responThe *nervous system of insects* is a complex network of nerve cells (neurons) and supporting cells that process and transmit information. Here's an overview: Structure 1. *Brain*: The insect brain is a complex structure that processes sensory information, controls behavior, and integrates information. 2. *Ventral nerve cord*: A chain of ganglia (nerve clusters) that runs along the insect's body, controlling movement and sensory processing. 3. *Peripheral nervous system*: Nerves that connect the central nervous system to sensory organs and muscles. Functions 1. *Sensory processing*: Insects can detect and respond to various stimuli, such as light, sound, touch, taste, and smell. 2. *Motor control*: The nervous system controls movement, including walking, flying, and feeding. 3. *Behavioral responses*: Insects can exhibit complex behaviors, such as mating, foraging, and social interactions. Characteristics 1. *Decentralized*: Insect nervous systems have some autonomy in different body parts. 2. *Specialized*: Different parts of the nervous system are specialized for specific functions. 3. *Efficient*: Insect nervous systems are highly efficient, allowing for rapid processing and response to stimuli. The insect nervous system is a remarkable example of evolutionary adaptation, enabling insects to thrive in diverse environments. The insect nervous system is a remarkable example of evolutionary adaptation, enabling insects to thrive

Handling Multiple Choice Responses: Fortune Effiong.pptxAuthorAIDNationalRes

LDMMIA Reiki Master Spring 2025 Mini UpdatesLDM Mia eStudios

Presentation of the MIPLM subject matter expert Erdem KayaMIPLM

K12 Tableau Tuesday - Algebra Equity and Access in Atlanta Public Schoolsdogden2

Algebra 1 is often described as a “gateway” class, a pivotal moment that can shape the rest of a student’s K–12 education. Early access is key: successfully completing Algebra 1 in middle school allows students to complete advanced math and science coursework in high school, which research shows lead to higher wages and lower rates of unemployment in adulthood. Learn how The Atlanta Public Schools is using their data to create a more equitable enrollment in middle school Algebra classes.

Metamorphosis: Life's Transformative JourneyArshad Shaikh

SPRING FESTIVITIES - UK AND USA -Colégio Santa Teresinha

Exploring-Substances-Acidic-Basic-and-Neutral.pdfSandeep Swamy

Exploring Substances: Acidic, Basic, and Neutral Welcome to the fascinating world of acids and bases! Join siblings Ashwin and Keerthi as they explore the colorful world of substances at their school's National Science Day fair. Their adventure begins with a mysterious white paper that reveals hidden messages when sprayed with a special liquid. In this presentation, we'll discover how different substances can be classified as acidic, basic, or neutral. We'll explore natural indicators like litmus, red rose extract, and turmeric that help us identify these substances through color changes. We'll also learn about neutralization reactions and their applications in our daily lives. by sandeep swamy

2541William_McCollough_DigitalDetox.docxcontactwilliamm2546

Unit 6_Introduction_Phishing_Password Cracking.pdfKanchanPatil34

YSPH VMOC Special Report - Measles Outbreak Southwest US 5-3-2025.pptxYale School of Public Health - The Virtual Medical Operations Center (VMOC)

A measles outbreak originating in West Texas has been linked to confirmed cases in New Mexico, with additional cases reported in Oklahoma and Kansas. The current case count is 817 from Texas, New Mexico, Oklahoma, and Kansas. 97 individuals have required hospitalization, and 3 deaths, 2 children in Texas and one adult in New Mexico. These fatalities mark the first measles-related deaths in the United States since 2015 and the first pediatric measles death since 2003. The YSPH Virtual Medical Operations Center Briefs (VMOC) were created as a service-learning project by faculty and graduate students at the Yale School of Public Health in response to the 2010 Haiti Earthquake. Each year, the VMOC Briefs are produced by students enrolled in Environmental Health Science Course 581 - Public Health Emergencies: Disaster Planning and Response. These briefs compile diverse information sources – including status reports, maps, news articles, and web content– into a single, easily digestible document that can be widely shared and used interactively. Key features of this report include: - Comprehensive Overview: Provides situation updates, maps, relevant news, and web resources. - Accessibility: Designed for easy reading, wide distribution, and interactive use. - Collaboration: The “unlocked" format enables other responders to share, copy, and adapt seamlessly. The students learn by doing, quickly discovering how and where to find critical information and presenting it in an easily understood manner. CURRENT CASE COUNT: 817 (As of 05/3/2025) • Texas: 688 (+20)(62% of these cases are in Gaines County). • New Mexico: 67 (+1 )(92.4% of the cases are from Eddy County) • Oklahoma: 16 (+1) • Kansas: 46 (32% of the cases are from Gray County) HOSPITALIZATIONS: 97 (+2) • Texas: 89 (+2) - This is 13.02% of all TX cases. • New Mexico: 7 - This is 10.6% of all NM cases. • Kansas: 1 - This is 2.7% of all KS cases. DEATHS: 3 • Texas: 2 – This is 0.31% of all cases • New Mexico: 1 – This is 1.54% of all cases US NATIONAL CASE COUNT: 967 (Confirmed and suspected): INTERNATIONAL SPREAD (As of 4/2/2025) • Mexico – 865 (+58) ‒Chihuahua, Mexico: 844 (+58) cases, 3 hospitalizations, 1 fatality • Canada: 1531 (+270) (This reflects Ontario's Outbreak, which began 11/24) ‒Ontario, Canada – 1243 (+223) cases, 84 hospitalizations. • Europe: 6,814

Geography Sem II Unit 1C Correlation of Geography with other school subjectsProfDrShaikhImran

Phoenix – A Collaborative Renewal of Children’s and Young People’s Services C...Library Association of Ireland

How to Manage Opening & Closing Controls in Odoo 17 POSCeline George

Anti-Depressants pharmacology 1slide.pptxMayuri Chavan

pulse ppt.pptx Types of pulse , characteristics of pulse , Alteration of pulsesushreesangita003

YSPH VMOC Special Report - Measles Outbreak Southwest US 4-30-2025.pptxYale School of Public Health - The Virtual Medical Operations Center (VMOC)

A measles outbreak originating in West Texas has been linked to confirmed cases in New Mexico, with additional cases reported in Oklahoma and Kansas. The current case count is 795 from Texas, New Mexico, Oklahoma, and Kansas. 95 individuals have required hospitalization, and 3 deaths, 2 children in Texas and one adult in New Mexico. These fatalities mark the first measles-related deaths in the United States since 2015 and the first pediatric measles death since 2003. The YSPH Virtual Medical Operations Center Briefs (VMOC) were created as a service-learning project by faculty and graduate students at the Yale School of Public Health in response to the 2010 Haiti Earthquake. Each year, the VMOC Briefs are produced by students enrolled in Environmental Health Science Course 581 - Public Health Emergencies: Disaster Planning and Response. These briefs compile diverse information sources – including status reports, maps, news articles, and web content– into a single, easily digestible document that can be widely shared and used interactively. Key features of this report include: - Comprehensive Overview: Provides situation updates, maps, relevant news, and web resources. - Accessibility: Designed for easy reading, wide distribution, and interactive use. - Collaboration: The “unlocked" format enables other responders to share, copy, and adapt seamlessly. The students learn by doing, quickly discovering how and where to find critical information and presenting it in an easily understood manner.

apa-style-referencing-visual-guide-2025.pdfIshika Ghosh

Ultimate VMware 2V0-11.25 Exam Dumps for Exam SuccessMark Soia

SCI BIZ TECH QUIZ (OPEN) PRELIMS XTASY 2025.pptxRonisha Das

To study the nervous system of insect.pptxArshad Shaikh

Handling Multiple Choice Responses: Fortune Effiong.pptxAuthorAIDNationalRes

LDMMIA Reiki Master Spring 2025 Mini UpdatesLDM Mia eStudios

Presentation of the MIPLM subject matter expert Erdem KayaMIPLM

K12 Tableau Tuesday - Algebra Equity and Access in Atlanta Public Schoolsdogden2

Metamorphosis: Life's Transformative JourneyArshad Shaikh

SPRING FESTIVITIES - UK AND USA -Colégio Santa Teresinha

Exploring-Substances-Acidic-Basic-and-Neutral.pdfSandeep Swamy

2541William_McCollough_DigitalDetox.docxcontactwilliamm2546

Unit 6_Introduction_Phishing_Password Cracking.pdfKanchanPatil34

YSPH VMOC Special Report - Measles Outbreak Southwest US 5-3-2025.pptxYale School of Public Health - The Virtual Medical Operations Center (VMOC)

Geography Sem II Unit 1C Correlation of Geography with other school subjectsProfDrShaikhImran

Phoenix – A Collaborative Renewal of Children’s and Young People’s Services C...Library Association of Ireland

How to Manage Opening & Closing Controls in Odoo 17 POSCeline George

Anti-Depressants pharmacology 1slide.pptxMayuri Chavan

pulse ppt.pptx Types of pulse , characteristics of pulse , Alteration of pulsesushreesangita003

YSPH VMOC Special Report - Measles Outbreak Southwest US 4-30-2025.pptxYale School of Public Health - The Virtual Medical Operations Center (VMOC)

Front-end development introduction (JavaScript). Part 2

1. FRONT-END DEVELOPMENT, PART 2: JS _by Oleksii Prohonnyi

3. Who am I Oleksii Prohonnyi Tech. lead @ Sigma Software  4+ years in IT  2 technologies  13 mentees  60+ interviews

4. IN PREVIOUS EPISODE

5. Front-end development, part 1: HTML/CSS Presentation: http://goo.gl/so2uHP Sources: https://goo.gl/Hef65u

6. JAVASCRIPT

8. JavaScript (also known as ECMAScript) It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. <wikipedia.org>

9. ECMASCRIPT

11. ECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. <wikipedia.org>

13. ECMAScript6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. More info: https://goo.gl/5xvio1

14. ES6 features  arrows  classes  enhanced object literals  template strings  destructuring  default + rest + spread  let + const  iterators + for..of  generators  unicode  modules  module loaders  map + set + weakmap + weakset  proxies  symbols  subclassable built-ins  promises  math + number + string + array + object APIs  binary and octal literals  reflect api  tail calls

16. OOD (TYPICAL)

18. OOD (PROTOTYPE)

21. OOP PRINCIPLES

23. OOP PRINCIPLES: Inheritance

26. OOP PRINCIPLES: Polymorphism

29. OOP PRINCIPLES: Encapsulation

31. How to deal with encapsulation in JS?  “Imagined” privacy  Private “static” methods (closures)  Real private properties and methods  Just don’t  More info: http://goo.gl/uaYcHp

32. DEMO (“src/ood” directory in sources [index.html, encapsulation.js])

33. DESIGN PATTERNS

34. DESIGN PATTERNS: Singleton

36. DEMO (“src/patterns” directory in sources [index.html?singleton])

37. DESIGN PATTERNS: Proxy

39. DEMO (“src/patterns” directory in sources [index.html?proxy])

40. More patterns implementations: https://github.com/oprohonnyi/js_trn/tree/patterns

41. TOOLS AND UTILITIES

42. *node.js

43. *npm

44. TOOLS AND UTILITIES: Tasks runner

45. *grunt

46. Grunt  In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes.  http://gruntjs.com/  Installation: “npm install –g grunt-cli”  Verify installation: “grunt --version”  Configuration: package.json + Gruntfile.js

47. DEMO (“tools/grunt” directory in sources)

48. *gulp

49. TOOLS AND UTILITIES: Node modules

51. More about coding guidelines: http://www.slideshare.net/oprohonnyi/javascript-coding-guidelines

52. *jshint

53. JSHint  Tool that helps to detect errors and potential problems in your JavaScript code.  http://jshint.com/  Configuration: .jshintrc  Custom reporter: jshint-stylish

54. DEMO (“tools/jshint” directory in sources)

55. *jscs

56. More useful modules  grunt-contrib-concat  grunt-contrib-uglify  grunt-contrib-htmlmin  grunt-contrib-livereload  grunt-recess  grunt-processhtml  grunt-jsdoc

57. DEMO (“tools/grunt” directory in sources)

58. IDE

59. *notepad

60. *Sublime Text 3

61. *Eclipse

62. *JetBrains WebStorm

63. *VS Code

64. DEMO (try by yourself WebStorm IDE and grunt task runner)

65. ONE MORE THING

67. REFERENCES

68. References  "JavaScript: The Good Parts" (Douglas Crockford)  "Learning JavaScript Design Patterns" (Addy Osmani)  "Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript" (David Herman)  "Clean Code: A Handbook of Agile Software Craftsmanship" (Robert Martin)  "Patterns of Enterprise Application Architecture" (Martin Fowler)  Presentation sources: github.com

70. Oleksii Prohonnyi linkedin.com/in/oprohonnyi slideshare.net/oprohonnyi