learn-co-curriculum/fewpjs-fewp-example

Demonstrate a front-end web programming example.

A Front-End Web Programming Example

Learning Goals

• Define web programming
• Contrast web page versus web application
• Identify reference example: "Liking on social media"
• Identify the "Three Pillars of Web Programming"

Introduction

The phrase "Front-End Web Programming" is used in different ways by different people. In this lesson, we're going to choose a definition of "web programming" and show an example that demonstrates the different parts of "web programming", so that we know our objective for the next set of lessons.

What Exactly Does "Web Programming" Mean Anyway?

Web programming, at its heart, is:

• Creating documents with HTML and styling/positioning the document's content with CSS
• Using JavaScript to provide interactivity
• Using JavaScript to notify remote servers

Web Page vs. Web Application

When a web page has a lot of JavaScript code, the page feels closer to a computer application, so some people may call it a "web application." However, it's worth noting that there is no clear distinction between a "web page" and a "web application." For instance, there's no rule like "When there are three or more actions it's a web application!" Different people draw the boundary differently. More or less, we call a web page an "application" when it feels "rich."

Identify Reference Example: Liking on Social Media

As we move through the rest of this material, we're going to use one, tiny interaction as our shared or "reference" example.

Web Programming Example: "Favoriting" a social media post.

Regardless of the social media site (Instagram, Pinterest, Facebook, LinkedIn, Twitter), the interaction goes something like this:

Step 1: The site renders some HTML content that is styled using CSS

Step 2: You see the content and decide to show your approval of it

Step 3: You click some visual element meant to show approval (heart, thumbs-up, +1, etc.). For example:

Step 4: The visual element updates (animates, goes from empty to full, jiggles, etc) like:

Step 5: Behind the scenes, the application tells the provider that this post has gained your approval so that the central provider can store this information and use it later (for example, to notify the post author that you liked their post).

If all goes as it should, the entire interaction only takes a second or two. But even this small interaction demonstrates all the concepts of front-end web programming.

Flatiron's "Three Pillars of Web Programming"

To help us learn web programming in three distinct phases, this curriculum is broken down into three essential "pillars":

• Recognize Events
• Manipulate the DOM
• Communicate with the Server

In the steps of the Favoriting a Social Media Post example, we italicized the characteristic verb in steps 3-5. Each of those words exemplifies the activity of one of the "pillars" we must learn in order to make web applications.

• Step 3 showed "Recognizing JS events:" Your click action on the empty heart tells JavaScript to do work

• Step 4 showed "Manipulating the DOM:" the work JavaScript was told to do was to update the screen to make the heart "look clicked"

• Step 5 showed "Communicating with the server:" the work JavaScript was told to do was to tell the social media company that you approved of this content

THINKING ABOUT LEARNING These "pillars" are not something professional developers outside Flatiron School curriculum recognize. You won't go into a tech interview and be asked: "Name the three pillars of web programming." These abstractions are a way to help learners (you!) recognize how what you're learning fits into three major activity areas. That said, if an interviewer asked you how to debug a web program and you said your strategy would be based on ensuring three "critical areas" were working, we think your interview answer would be off to a good start!

Now you know what's going on when you click that heart! The next lessons will focus on explaining each of these "pillars" in more detail. After you've worked your way through them, your new "web programmer" eyes will have you looking at your favorite sites very differently.

Conclusion

Web Programming is creating documents with HTML, styling/positioning the documents' content with CSS, and updating that content and servers based on events using JavaScript. We can break down the JavaScript part of web programming into three pillars that involve working with the DOM, JavaScript eventing and communication with the server. Now that we've seen how these pillars are connected in the abstract, we are ready to dive into seeing how they work together in detail.

fewpjs-fewp-example's Issues

THANK YOU!

I completed the previous JS module and am now going back through the new material. This example (with the pillars) is a big picture view that I was completely missing before.
Thank you so much for your dedication to creating and updating the curriculum.
(Maybe this is the wrong place to send this, but I send a lot of "problems" via Issues, and wanted to send something nice for a change.)

Wording.

In the second to last paragraph in this README, it states:

'This course will have your "web programmer" eyes will have you looking at your favorite sites very differently! '.

I'd probably reword this to something like:

'This course will improve your "web programmer" vision and will have you looking at your favorite sites very differently! '.

It's a minor thing - but It helps me to learn and follow along when the literature is well written. Thank you for listening.

-Matthew J. Campbell