Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

717 views

Published on

Презентация к выступлению на IV международной летней школе по программированию, в рамках проекта Tempus, в Одесском национальном политехническом университете (ОНПУ)

Проект: Учебный Научно-Производственный Центр Аутсорсинга (УНПЦА)
Дата: 11.07.2014
Город: Одесса/Харьков

Published in: Education
  • Be the first to comment

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

  1. 1. FRONT-END RICH JAVASCRIPT APPLICATION CREATION BY O.PROHONNYI
  2. 2. THEORY
  3. 3. ABOUT FRONT-END DEVELOPMENT
  4. 4. In computer science, the front end is responsible for collecting input in various forms from the user and processing it to conform to a specification the back end can use. The front end is an interface between the user and the back end. wikipedia.org
  5. 5. ABOUT HTML
  6. 6. HTML or HyperText Markup Language is the standard markup language used to create web pages. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>). wikipedia.org
  7. 7. ABOUT CSS
  8. 8. Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. wikipedia.org
  9. 9. ABOUT JAVASCRIPT
  10. 10. JavaScript (JS) is a dynamic computer programming language. 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
  11. 11. WORKSHOP PRESENTATION
  12. 12. ABOUT JQUERY
  13. 13. jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. wikipedia.org
  14. 14. Ajax (Asynchronous JavaScript and XML) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With Ajax, Web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. wikipedia.org
  15. 15. ABOUT BACKBONE.JS
  16. 16. Backbone.js is a JavaScript library with a RESTful JSON interface and is based on the model–view–presenter (MVP) application design paradigm. Backbone is known for being lightweight, as its only dependency is on one JavaScript library, Underscore.js. wikipedia.org
  17. 17. Model–view–presenter (MVP) is a derivative of the MVC architectural pattern, also used mostly for building user interfaces. In MVP the presenter assumes the functionality of the "middle-man". In MVP, all presentation logic is pushed to the presenter. Eventually, the model becomes strictly a domain model. wikipedia.org
  18. 18. Underscore.js is a JavaScript library which provides utility functions for common programming tasks. It is comparable to features provided by Prototype.js and the Ruby language, but opts for a functional programming design instead of extending object prototypes. wikipedia.org
  19. 19. PRACTICE
  20. 20. STEP 1 BASIC PAGE STRUCTURE
  21. 21. STEP 2 MARKUP/STYLING
  22. 22. STEP 3 APP ENGINE
  23. 23. Model: - Post - PostsList (Collection:Post) View: - PostView - PostsListView Router: -
  24. 24. Backbone.js resources: - http://backbonejs.org/ (http://backbonejs.ru/) - http://underscorejs.org/ - http://backbonetutorials.com/ - http://code.tutsplus.com/tutorials/getting-started-with- backbonejs--net-19751 - http://backbonetraining.net/resources
  25. 25. OLEKSII PROHONNYI oprogonniy@gmail.com fb.com/oprohonnyi Sources: https://goo.gl/Gb5PFB

×