Why & How FrontEnd ?

- IYTE ACIL project - web team - love at first sight

- Hamath Mental - Arithmetic Visual Game (ActionScript)

- SW Engineering term project - GPS Tracking System - Google  Maps API

Meeting Linovi

- Internship at iDivino

- A Facebook message :)

- "What? FrontEnd? Really? Why?"

What do we use?

- Scala - Play! Framework

- AngularJS, jQuery, Bootstrap, and 3rd party libs (Highcharts,  Mapbox)

- VCS (GitHub)

- CI (Jenkins)

- Selenium, AngularMock, Karma, Jasmine

What is Front-End ?

On the ground;

- HTML (visual representation)

- CSS (make-up)

- JavaScript (dynamism, actions & interactions)

- The terms front end and back end are distinctions which refer to the seperation of concerns between a presentation layer and a data access layer. [Wikipedia]

- The front end is an interface between the user and the back end

Front-End = Browser = JavaScript ?

Mostly, yes, %70 of Front-End is JavaScript, however, JavaScript is not just browser. According to this, Front-End is not just browser, too.

NodeJS

- Build systems (Grunt, Gulp, Webpack)

- CSS & JavaScript preprocessors, postCSS tools (auto-prefixers,  minifiers & uglifiers etc.)

- Transpilers (TypeScript, EcmaScript implementations [ts, babel,  traceur])

- JavaScript Linting tools (ESLint, JSHint)

- Of course, Back-End programming for JavaScript lovers (like me) (ExpressJS)

- Tessel.io, If want embedded programming with JavaScript

ExpressJS

app.get("/index", function() {
    console.time("getReportData responded in");
    var res = null;
    if (request.body.startDate === undefined || request.body.endDate === undefined || request.body.period === undefined) {
      res = {error: "Missing parameter"};
      response.status(400);
    } else {
      var startDate = request.body.startDate;
      var endDate = request.body.endDate;
      var period = request.body.period;

      res = [];
      for (var i = startDate; i <= endDate; i += data.maxCounts[period]) {
        var date = moment(new Date(i)).format(data.formats[period]);
        var TOTAL_COUNT = Math.ceil(Math.random() * data.limits[period]) + 1;
        var UNIQUE_COUNT = Math.floor(Math.random() * TOTAL_COUNT / 2) + 1;

        data.TOTAL_COUNT += TOTAL_COUNT;
        data.UNIQUE_COUNT += UNIQUE_COUNT;

        res.push({date: date, TOTAL_COUNT: TOTAL_COUNT, UNIQUE_COUNT: UNIQUE_COUNT});
      }
      response.status(200);
    }
    response.json(res);
    console.timeEnd("getReportData responded in");
});

var port = common.port();
app.listen(port, function() {
  console.log("server is listening on http://localhost:" + port);
  console.log("press CTRL + C to quit..");
});

Tessel.io

var tessel = require('tessel');
var servos = require('servo-pca9685').connect(tessel.port('A'));

var degrees = 0;
setInterval(function () {
  servos.moveServo(1, degrees);
  degrees = degrees == 0 ? 180 : 0;
}, 500);

Yes. This presentations is also a JavaScript library [reveal.js]

This presentation...

So, What is Front-End Engineering ?

We program

- HTML, CSS & JavaScript, with their libraries, frameworks and their 3rd party add-ons.

We should have

- Aesthetic sensitivity & programmatic rigor

- Communication skills; because you are the bridge between  product managers and backend

We are responsible for

- Building UX and usability (some cases UI, too) [UX !important]

- Optimize apps to maximize performance and scalibility

- Cross platform support

- Being up-to-date

- Choosing & using correct tools for the permanent solutions

What should a FrontEnd Engineer do?

- Don't simply agree to do tasks without reviewing them first.  Understand well what is being asked from you (functionality), not  just "this is not working".

Sometimes a task to "add a button" may not end up by just adding a button.

What does experts say?

- Mindset is more important than knowing any library/framework.

- Don't just solve problem, figure out what's really going on.

- Learn to anticipate future changes to the browser landscape. [BE generally runs in an environment that's under control. By contrast, FE is not!]

- Read the specs - there will always be bugs between two browsers. whatever workaround you choose will almost certainly break in the future.

- If two browsers render the same code differently, figure out which one of them is correct.

- Read other peoples code, good way to become a better developer. other people's code opens your mind.

- Work with people smarter & more experienced than you. At least the beginning part of your career

What does experts say?

- Reinvent the wheel : bad for business, but good for learning.

- Write about what you learn : forces you understand the topic better.

- Writing, giving talks, creating demos  to force yourself to fully understand something. Even if no one ever reads what you write

Question to an Expert (@Quora) : Why can't we find FrontEnd developers?

- "front end development is much easier than other fields of engineering."

So why  startups have trouble finding FrontEnd developers?

- It's a new field.

- You may disagree; since Front End Engineering is similar to Web Development (which is around for more than 20 years!)

- But, the concept is definitely quite new. (started to grow just few years ago.)

Misconceptions

- Most people think that FrontEnd is a "relatively easier field"

What most people think FrontEnd engineering is:

- Taking a Photoshop file, Image, or Wireframe and making it into a webpage.

- Sometimes design previous Photoshop file, Image or Wireframe.

- Code Javascript, which creates animations and makes transitions inside a webpage.

- Code HTML and CSS, which defines content and styling inside a webpage.

Concepts

- Establish a visual language between Designers and Engineers

- From a Visual Design, define a set of components

- Establish a baseline for the Web App (frameworks, requirements, visual languages and specs)

- Define the scope of the Web App (devices, browsers, screens)

- Develop a QA guideline to ensure code quality, review of product by stakeholders.

- Style the Web App with proper typography.

- Style the Web Application with device oriented mockups, all while taking care of design guidelines.

- Markup the Web App taking into account semantics, accessibility, SEO, schemas and microformats.

- Connect to an API to retrieve information in a friendly, non-battery consuming, device and client aware way.   

Bad FrontEnd Engineers

- Most obvious reason on why it's hard to find good FrontEnd Engineer : because there are many bad!

- But another reasons: low entry barrier; HTML, CSS & JavaScript

- Not hard languages to grasp [w3schools, codeAcademy or codeSchool].

- But understanding the underbelly of the web is a whole different thing

What Bad FrontEnd Engineers do? (hurting good ones)

- Abuse of libraries, without internals of JS

- Abuse of plugins, using other’s code without even read it.

- Add a CSS Frameworks without any requirements, designs, or performance comparison.

- Coding CSS without conventions, preprocessors, naming standards, good practices & over qualified selectors, ids, magic numbers, !important.

- Ignoring performance, memory leaks (not knowing what’s a memory leak)

- Presenting a product without any metrics, "It works on my Computer/Browser/Device"

Good FrontEnd Engineers know:

- web is powerful, and the code that is executed there, must be developed with the same care (or even more) than any other language in anywhere.

-  It’s not a requirement to have a CS background to be a good Front End Engineer, but the fundamental mechanics of Computing and Software should always be taking into account even if you are coding in Javascript or in a browser.

Final words...

- Today, more than ever, the web has a place for FrontEnd Engineers.

- Evolution of multiple devices, browsers and web standards, made it urgent finding people focuses on the user side Web apps

- Not only because of amazing work environments or big pay checks most Front End Engineers job offer

- Coding in the web is incredible exciting: you have the chance of touching the life of thousand of users

- despite the limitations, browsers/devices are able to parse, paint and render any kind of crazy ideas.

- Godspeed Front End Engineers, the Web is waiting for you.

Thank You