Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frontend Development for Testers

Avatar for Pavels Jelisejevs Pavels Jelisejevs
May 10, 2018
17

Frontend Development for Testers

An introduction to modern frontend development for testers and QA specialists.

Avatar for Pavels Jelisejevs

Pavels Jelisejevs

May 10, 2018
Tweet

Transcript

  1. A lot, actually • The browser contacts you DNS server

    to lookup the IP address of the website using its domain name • The browser downloads and interprets the HTML file returned by the server • The browser downloads external resources such as CSS and JavaScript files or images • The browser interprets the CSS files and renders the page • The browser interprets the JavaScript files and provides interaction with the web page
  2. What is HTML? HTML is a markup language for describing

    web documents (web pages). • HTML stands for Hyper Text Markup Language • A markup language is a set of markup tags • HTML documents are described by HTML tags • Each HTML tag describes different document content
  3. What are tags? • An HTML document consists of tags

    • Each tag defines an element, it’s default dehaviour and appearance • A tag can be paired to wrap some content, such as <h1>Header</h1>, or standalone - <br /> • Each tag has a certain set of attributes - <p id="my-text"></p>
  4. How does it look like? <!DOCTYPE html> <head> <title>Java School

    2016</title> </head> <html> <body> <h1>Welcome to Java school!</h1> <p>Java is not the only thing you'll learn here</p> </body> </html>
  5. Structure of the HTML file • Each HTML file starts

    with a <!Doctype> directive • The body of an HTML element usually starts with the <html> tag with <head> and <body> inside: <html> <head> // meta information goes here </head> <body> // actual context goes here </body> </html>
  6. HTML syntax is forgiving • This means that you can

    write <br> or <br />, <li> without a closing tag etc. • Browsers will try to do their best to display the broken syntax correctly. • Can doesn't mean should. Don't ever do this
  7. Basic elements: text with a link <p> <a href="http://google.com">Google</a> will

    help you find more information on any element. </p>
  8. Basic elements: a list <ul> <li>Element 1</li> <li>Element 2</li> </ul>

    <ol> <li>Element 1</li> <li>Element 2</li> </ol>
  9. Semantics • Each HTML tag has a special meaning •

    There are specialized tags for particular UI elements: <nav> for navigation bars, <aside> for sidebars and <h1> for headers. • They should be used whenever possible instead of more generic elements like <div> or <span>.
  10. Why is semantics important? <div class="post"> <div class="header">Important post</div> <div

    class="content"> Lorem ipsum ... </div> <div class="footer"> Posted 2 days ago </div> </div> <article class="post"> <h3 class="header">Important post</h3> <section class="content"> Lorem ipsum ... </section> <footer class="footer"> Posted 2 days ago </footer> </article> Semantic HTML allows robots to better distingquish your content. Consider two examples:
  11. How is it used? • For SEO (search engine optimization)

    – semantic HTML can help search engines better understand your content and achieve better ranking • Accessibility – semantic HTML used together with other ARIA features can help users with limited abilities to access your content
  12. What is CSS? • Cascading Style Sheets (CSS) are a

    stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
  13. How to define styles There are three ways you can

    define styles: 1. Inline, using the style attribute <div style="color: red"></div> 2. Using the <style> tag 3. Using a separate CSS file <link rel="stylesheet" type="text/css" href="styles.css">
  14. Selectors HTML elsements can be referenced in various ways: 1.

    By element type: h1, article 2. By class: .login-form, .blog-post 3. By ID: #sign-up-button 4. By pseudo class: :first-child, :visited
  15. Values Values can have different types: • Keywords: • auto,

    smaller • Numeric: • order: 2 • width: 50% • Numeric with units: • width: 300px; • font-size: 1.5em; • Colors: • color: red; • background: #EEEEEE; • URLs: • background: url('my-image.jpg') • Compound: • border: 1px solid red;
  16. The notion of cascade Element styles are define in different

    sources thus forming a cascade. The sources are: 1. Browser default styles 2. User styles (browser settings) 3. Author's styles defined in the web page itself Additionally, each elements inherits styles from the parent elements, i.e. a <a> link can inherit the font size from the paragraph text.
  17. Inheritance Elements inherit styles from the parent elements. <p> Be

    sure to visit <a href=https://developer.mozilla.org>Mozilla Developer Network</a> for more information </p> <style> p { font-size: 2em; color: black; } a { color: red; } </style>
  18. Overriding styles Styles can be overriden by a more specific

    selector <p>Black text</p> <p class="highlight">Red text</p> <style> p { color: black; } p.highlight { color: red; } </style>
  19. Responsive design Responsive web design (RWD) is an approach to

    web design aimed at crafting sites to provide an optimal viewing and interaction experience across a wide range of devices (from desktop computer monitors to mobile phones)
  20. Approaches to responsive design • Define a list of form

    factors you are willing to support • Keep the list short • Choose your primary platform • Choose a technique to implement responsiveness: media queries, CSS/JS libraries etc.
  21. What is JavaScript? JavaScript (JS) is a lightweight, interpreted, programming

    language with first-class functions. Most well-known as the scripting language for Web pages, many non-browser environments also use it, such as node.js. JS is a flexible and multi-paradigm language.
  22. Or ECMAScript? ECMAScript (or ES) is a trademarked scripting- language

    specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. Each version of ECMAScript defines a certain list of features to be implemented by browsers or other platforms.
  23. Data types JavaScript has the following types: • Numbers: 2,

    3.4 • String: "Java" • Boolean: true, false • Array: [1, 2, 3] • Object: { name: 'John' } • Null • Undefined • Symbol
  24. Variables • Variables in JavaScript are declared using the var,

    let or const keywords. const PI = 3.14; let names = ["Peter", "Winston"] • Variables defined using let of const are block-scoped • Variables defined using the var keyword are function-scoped
  25. Control structures • Most of the control structures are familiar

    to other languages, such as Java: if (true) { for (var i = 0; i < 5; i++) { console.log(i); } } else { // this will never happen }
  26. Functions • Functions are first-class citizens in JavaScript function greet(name)

    { console.log('Hello ' + name); } greet('Jose'); var myGreetFunctions = greet;
  27. More abount functions • Passing functions as parameters is an

    important pattern in JavaScript function getName() { return 'Carl'; } function greet(getNameCallback) { console.log('Hello ' + getNameCallback()); } greet(getName);
  28. Objects var user = { name: 'John', sayHello: function() {

    console.log('Hi, I\'m ' + this.name); } } user.sayHello(); // Hi, I'm John
  29. Adding JavaScript to HTML JavaScript can be included into a

    page in three ways: • In an event attribute: <button onclick="alert('Hey!')">Say hello</button> • By writing it inside of the <script> tag <script> alert('Hey!'); </script> • By loading an external file with the same <script> tag <script src="scripts.js"></script>
  30. TypeScript • A language that is compiled into JavaScript •

    Strictly typed • Includes additional features from the modern versions of ES
  31. Popular frameworks Some of the most popular frameworks at the

    time of writing are: • Angular • React
  32. Angular 2 • A heavyweight, “batteries included” framework • Provides

    most of the required development features out of the box • Written in TypeScript
  33. React JS • More of a view library then a

    framework • Mixes template and logic into the JSX syntax • Fast and lightweight
  34. HTML, CSS and JavaScript engines • Browsers have their own

    engines for parsing and interpreting HTML, CSS and JavaScript. • Each browser supports different features, meaning that your application can behave differently in different browsers.
  35. Web API’s • Networking • User interaction events: clicking, taping,

    scrolling etc. • DOM (HTML and CSS) manipulation • Location information • Access to camera and microphone • Mobile features, e.g. vibration • Drawing using canvas or SVG • Profiling: performance measurements and debugging
  36. Security • Secure connections • Sandboxed environment: the JS executed

    on a website is isolated from the host machine • JS executed on a website cannot access data from other websites
  37. Persistance Browsers provide mechanisms for persisting data: • Cookies -

    used for storing small amounts of data (e.g. a session ID) • Local storage - used for storing larger amounts of data, e.g. for offline applications. Available throw different tabs and persists when closing the browser. • Session storage - similar to local storage but limited to particular tab and perishes after a tab has been closed.
  38. Caching • Browsers can cache results to improve user experience

    • The developer can define caching lifetime for different resources
  39. Debug tools Browsers provide powerful tools to debug your web

    applications. For example, Chrome Developer Tools.