The Mystery of Front-end Development

Slide 1

Slide 1 text

The Mystery of Front-end Development Nouran Mahmoud Ahmad El-Alfy 26th April 2016

Slide 2

Slide 2 text

The speakers Ahmad El-Alfy @ahmadalfy alfy.me Nouran Mahmoud @Nouran_Mhmoud

Slide 3

Slide 3 text

Agenda -How the web works -The front-end and the backend -History of front-end development -Front-end Stack -Jobs Market -Questions and discussion

Slide 4

Slide 4 text

How the web works

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Back-end

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Front-end

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

The three foundational languages that empower the web

Slide 13

Slide 13 text

Short history about what happened in the past 20 years

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

Highlights in the history of HTML •Before HTML4, presentational elements were introduced to style the content like for bold, for italic, for … center you know! Presentational attributes were also being used like color, font-size. •With the introduction of the 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.

Slide 17

Slide 17 text

CSS

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

Blue Beanie Day!

Slide 21

Slide 21 text

Responsive Web Design

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

Is CSS difficult?

Slide 24

Slide 24 text

Is CSS difficult?

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

JavaScript

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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 }

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

Components of JavaScript

Slide 35

Slide 35 text

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)

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Highlights in JavaScript Evolution and Tools

Slide 38

Slide 38 text

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/

Slide 39

Slide 39 text

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.

Slide 40

Slide 40 text

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.

Slide 41

Slide 41 text

How does features land the browser

Slide 42

Slide 42 text

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.

Slide 43

Slide 43 text

The tools we use

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

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.

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Modern Workflow Tools

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

Keeping up to date

Slide 51

Slide 51 text

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.

Slide 52

Slide 52 text

“To follow the path, look to the master, follow the master, walk with the master, see through the master, become the master” Zen Proverb

Slide 53

Slide 53 text

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.

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Subscribe to those newsletters • HTML5 Weekly • CSS Weekly • RWD Weekly • Sidebar.io • WDRL • JavaScript Weekly • The Daily Platform

Slide 58

Slide 58 text

Follow these websites •Smashing Magazine •HTML5 Rocks •24 Ways •Codrops •A List Apart •HTML5 Doctor •Nettuts + •CSS Wizardry •CSS-Tricks

Slide 59

Slide 59 text

Subscribe to these podcasts Shoptalk show The big web show JavaScript Jabber The web ahead Five minutes of Javascript

Slide 60

Slide 60 text

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.