The Mystery of Front-end Development

Introduction to Front-end development talking about the history and the three foundational components that empower the front-end component of the web.

It was presented in an event sponsored by ITI in Faculty of computer science, Mansoura University, Egypt.

Presented by @Nouran_Mhmoud and @ahmadalfy

Transcript

1. The Mystery of Front-end Development Nouran Mahmoud Ahmad El-Alfy 26th April 2016
2. The speakers Ahmad El-Alfy @ahmadalfy alfy.me Nouran Mahmoud @Nouran_Mhmoud
3. Agenda -How the web works -The front-end and the backend -History of front-end development -Front-end Stack -Jobs Market -Questions and discussion
4. How the web works
6. Back-end
9. Front-end
10. What is front-end development? Front-end development is the practice of producing the part of the web applications that work inside the browsers. It requires knowledge of the three foundational languages that empower the web; HTML, CSS and JavaScript. It also requires understanding of concepts like semantics, writing code that can be understood by the machines, accessibility and others.
11. We -human readers- can immediately (visually) distinguish all the page elements and more importantly understand the content. Machines are dumb and cannot do this. They need markup to tell them what they are parsing and how should they handle it.
12. The three foundational languages that empower the web
13. Short history about what happened in the past 20 years
14. HTML (HyperText Markup Language) •HTML is meant to be human readable. It defines the structure and content of the document. •It is maintained by the W3C (World Web Consortium) •HTML had a lifespan of nearly 25 years. During this time it has evolved from a simple language with a small number of tags to a complex system of mark-up . •Versions 1 to 4 ranged was developed during the timespan between 1993 to 1999. •In 2002, XHTML became a recommendation by the W3C.
15. History of HTML •On 2004 a new group called the Web Hypertext Application Technology Working Group (WHATWG) – by forces from Mozilla foundation and Opera Software- started working on a new update to the language planning to create XHTML 2.0 •In 2009 the W3C decided to discontinue the work on XHTML 2.0 and decided to start to work on a new specification called HTML5 together with WHATWG. •HTML5 was finalized and published on 2014.
16. Highlights in the history of HTML •Before HTML4, presentational elements were introduced to style the content like <b> for bold, <i> for italic, <center> for … center you know! Presentational attributes were also being used like color, font-size. •With the introduction of the <table> element and the ability to set the table border to zero, many developers started using tables for creating layouts. This contradicted with the main purpose of HTML; HTML defines the structure and the content of the document. •Cascading Style Sheets (CSS) emerged to define the presentation of the document in terms of look and feel.
17. CSS
18. CSS (Cascading Style Sheets) •CSS defines the presentation of the document. •CSS became a W3C recommendation on 1996. •CSS versioning was meant to be like the HTML 1, 2 and finally 3. After CSS3, the W3C decided to split CSS into modules. Each module now have its own versioning system. For example now we have: 1.CSS Grid Layout Module Level 1 2.CSS Fonts Module Level 3 3.Selectors Level 4
19. CSS (Cascading Style Sheets) •CSS was complicated at the beginning and people mostly didn’t understand how can it be used to create complete layouts until Jeffery Zeldman wrote his book “Designing with Web Standard” in 2003 •The book is credited with converting the industry from tag soup to semantics and accessibility via correct use of HTML, CSS, and JavaScript.
20. Blue Beanie Day!
21. Responsive Web Design
22. Responsive Web Design •The term was coined by Ethan Marcotte. •It’s meant to provide an optimal viewing and interaction experiences across a wide range of devices by adapting the layout to the viewing environment. •Responsive web design is becoming more important as the amount of websites traffic is increasing.
23. Is CSS difficult?
24. Is CSS difficult?
25. Why people hate CSS? •CSS is extremely simple to learn and to get started with. •One of the goals author had in mind while making CSS was backward compatibility. That meant when a parser encounter a rule it do not understand; it would simply skip that declaration and move on to the next. Unlike other languages which will throw exceptions and exit the program. •The problem with CSS is that it becomes hard to work with at any reasonable scale because picking class name is surprisingly extremely difficult.
26. What makes CSS difficult •It follows specification that sometimes sound misleading. It isn’t like other programming language where you can imagine the behavior of declarations without learning it. •Everything is global. Selectors are matched against everything in the document. We need naming strategies to combat against this and keep things efficient (which are hard to enforce and easy to break). •CSS grows over time. Smart people on great teams cede to the fact that they are afraid of their own CSS. You can't just delete things as it's so hard to know if it's absolutely safe to do that. So, they don't, they only add.
27. Writing maintainable CSS In 2002 Tantek Celik wrote a blog post called A Touch of Class (http://tantek.com/log/2002/12.html#L20021216). His article recommended a few practices to write what he called "Good CSS". He suggested a few things like •using semantic HTML. •using context before class. •using structural class names over presentational class names like sidebar instead of right-bar and error instead of redtext. •lowercase class names. •no underscores or hyphens.
28. CSS Patterns / UI Frameworks Because in CSS everything is global; we needed naming strategies to combat against this and keep things efficient. This lead to the rise of many CSS patterns and methodologies like CSS Resets, BEM, SMACSS, OOCSS, Atomic CSS … UI frameworks emerged to help developers prototype faster by introducing ready to use components. They evolved to be used for production instead of prototyping only.
29. JavaScript
30. JavaScript •JavaScript defines the behavior of the elements inside the document. •Developed by Netscape on 1995 with the sole purpose of handling input validation that was left for the server. •JavaScript changed from the most notoriously hated scripting/programming language in history to the dominant language in the 21st century. •It’s one of the most misunderstood languages because people start to use it before learning it. •It’s said that “Anything that can be built using JavaScript, will eventually be built by JavaScript” – Jeff Atwood.
31. Origin of JavaScript •JavaScript was created in 10 days only by Brenden Eich who was working at Netscape at this time. •It was called Mocha at the beginning then renamed to LiveScript. •With the release of the second version of Netscape navigator, Netscape entered into a development alliance with Sun Microsystems to complete its implementation and then it was renamed to JavaScript. •At this time Netscape was such a hit with its implementation of JavaScript. Microsoft released Internet Explorer 3 with its own implementation that was called JScript.
32. JavaScript Origin •Each company was maintaining its own version of the language. There was no standard governing its syntax or features. •At this time developers was writing code to support each implementation. It was normal to find this on live websites If ( feature supported on IE ) { // … Features IE supports } else if ( feature supported on Netscape ) { // … Features Netscape supports }
33. ECMAScript (often pronounced ek-ma-script) •The community took a step at this time to stop this madness by submitting the language to the European Computer Manufactures Association (Ecma) in an effort to standardize the language. A standard defining the new scripting language called ECMAScript was announced.
34. Components of JavaScript
35. Document Object Model (DOM) •The DOM is an API that allows us to interact with the document and alter its content. •The DOM presents the document as a tree. •Before developing the standard of the DOM, IE and Netscape started working on their own versions of what they called DHTML (Dynamic HTML)
36. Browser Object Model (BOM) •The BOM is an API that allows us to interact with the browser window. •The BOM allows us to •Move, resize and close browser windows •Fire pop up windows •Get information about the browser through the navigator object. •Get information about the opened page using the location object
37. Highlights in JavaScript Evolution and Tools
38. The birth of jQuery jQuery is a JavaScript library that was invented to facilitate DOM manipulation by providing an abstraction layer that deals with browsers inconsistencies … In mid 2005 John Resig wrote an article about how he liked a library called Behavior and proposed a few changes to attach events to elements using simple syntax. That post was the spark that started jQuery the library. http://ejohn.org/blog/selectors-in-javascript/
39. The invention of AJAX It all started when Microsoft invented the XMLHttp object and Mozilla incorporated the XMLHttpRequest in their browser. It allowed exchange of data between the web browser and the web server in an asynchronous way. In the early day it used the XML format for data exchange but then we shifted to JSON. AJAX technology is the core that empowers most if not all the web applications that we use today.
40. Rise of the Frameworks With the huge advantage of loading and refreshing parts of the page without refreshing the whole page, a massive need for frameworks that would give structure to our JavaScript application emerged. jQuery excelled in DOM manipulation and making simple AJAX requests. We needed more tools to organize and structure our applications. Frameworks like Backbone.js, knockout and recently AngularJS emerged to solve these problems by providing MV* patterns to structure our code, provide routes, save application states and more.
41. How does features land the browser
42. Browsers Front-end development takes place in one of the most hostile environments anyone can work with; the browser. The reason is, we do not know anything about it (browser vendor, rendering engine, JavaScript engine, Window dimensions, input methods …) and we have to make it work everywhere. In the past people used to detect which browser they are serving and serve it a special instruction. This practice was called browser sniffing and it is replaced now by feature detection.
43. The tools we use
44. Editors For so long, we solely depended on the three languages that empowered the browsers. There language didn’t require any further compilation or processing so all what people used was just text editors loaded with shortcuts, micros and plugins that speed up the writing process.
45. Browser Tools Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently- loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. It is basically built to help you debug your work inside the browser.
46. Browser Tools Developer tools have evolved over the years and became an essential toolkit in our work. It can help you alter page content, access JavaScript scope, profile bottle necks, debug performance issues and more.
47. Modern Workflow Tools With the repetitive patterns of the tasks front-end developers used to do, the need for more versatile highly customizable robust tool emerged. The nature of the tasks that was required to be performed by such tools was something cannot be achieved using the regular concept of the IDEs. All that lead to the birth of the Task Runners. Task runners are mostly command line tools that perform a set of specific tasks configured by the developer. It is highly customizable and efficient. Each task is following the single responsibility principle which means; it do only one thing … but it do it efficiently
48. Modern Workflow Tools
49. What does these tools actually do? As mentioned before, it is used mainly for competitive tasks like - Compilation of preprocessed languages to HTML/CSS/JavaScript. - Concatenate and Minify your assets. - Compress the images - Copy fonts, styles and scripts from 3rd party packages to your project. - Lint your scripts. - Automate test running. - Automated deployment and continuous integration.
50. Keeping up to date
51. Before we start … New frameworks, libraries, compilation tools and practices are always going to pop up; for something as malleable and as big as the web, it's inevitable that there are a ton of things to choose from. Trying to keep up to date with everything would bring you frustration.
52. “To follow the path, look to the master, follow the master, walk with the master, see through the master, become the master” Zen Proverb
53. Start following those people … -Leading tech companies always have technology evangelists and developer relationship managers who advocate and spread the knowledge about either the technologies or their company’s products that empower that technology. -Core members in active and popular projects. -Members in the W3C and other institutions who have their own blogs and they write about their work. -Developers who blog regularly about web technologies. -Book authors who also blog.
57. Subscribe to those newsletters • HTML5 Weekly • CSS Weekly • RWD Weekly • Sidebar.io • WDRL • JavaScript Weekly • The Daily Platform
58. Follow these websites •Smashing Magazine •HTML5 Rocks •24 Ways •Codrops •A List Apart •HTML5 Doctor •Nettuts + •CSS Wizardry •CSS-Tricks
59. Subscribe to these podcasts Shoptalk show The big web show JavaScript Jabber The web ahead Five minutes of Javascript
60. Bonus items -Read popular questions on Stackoverflow every week -Attend conferences if you can. Or watch their videos on YouTube. -Check the subreddits related to the field e.g /r/JavaScript /r/Frontend /r/programming … etc -Reach out to people and ask after you do your research.
61. Jobs and Market
62. Questions
63. Enjoy! :)