The Front-end Development Workflow

Goce Mitevski

EESTEC Code App Level Up 3,
Faculty of Computer Science and Engineering (FCSE)
Ss. Cyril and Methodius University, Skopje

4th March 2016

Introduction

Goce Mitevski

Independent Multidisciplinary Designer

@GoceMitevski on Twitter

http://www.nicer2.com/

goce.mitevski@nicer2.com

Topics

  • Web Development in general
  • Differences between Front-end and Back-end Development
  • Required skills for Front-end Development
  • Front-end Development Workflow
  • Front-end Development Work Positions

Have a question? Feel free to interrupt me.

What is Web Development?

Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, and social network services.

 

Wikipedia

What is Web Development?

Among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing markup and coding.

 

Wikipedia

What is a Web Developer?

A web developer is a programmer who specializes in, or is specifically engaged in, the development of World Wide Web applications, or distributed network applications that are run over HTTP from a web server to a web browser.

 

Wikipedia

Front-end Development

HTML

CSS

JavaScript

Back-end Development

Servers

Programming

Database
Systems

HTML + CSS + JavaScript = Front-end Development

Front-end development, also known as client side development is the practice of producing HTML, CSS and JavaScript for a website or web application so that a user can see and interact with them directly.

 

Wikipedia

10-15 years ago...

  • ... Web development was very different

  • a lot less tools, frameworks and libraries available

  • free and open source software was not mainstream

  • technologies were simpler

  • challenges were smaller

  • JavaScript was rarely used

AJAX Changed Everything

  • AJAX (Asynchronous JavaScript and XML) - a set of web development techniques to create asynchronous Web applications

  • Huge HTML and CSS advancements are made

  • Web applications become much more immersive and start mimicking desktop applications

  • Huge progress is made in terms of markup, style sheets and scripting

  • Possibilities become almost limitless

FRONT-END DEVELOPMENT WORKFLOW

FOR BETTER OR FOR WORSE

HTML

CSS

JavaScript

.transition{
  -webkit-transition: ease 0.5s;
  -moz-transition: ease 0.5s;
  -o-transition: ease 0.5s;
  -ms-transition: ease 0.5s;
  transition: ease 0.5s;
}

https://leaverou.github.io/prefixfree/

http://blog.html5test.com/2015/07/safari-and-ie/

http://venturebeat.com/2014/10/26/google-launches-inbox-app-for-chrome-but-its-just-a-glorified-shortcut-for-now/

DON'T!

WATCHES

VIRTUAL REALITY

HoloLens

NetBeans IDE, Oracle

Visual Studio Code, Microsoft

Sublime Text

Atom, GitHub

Bootstrap - web framework/collection of tools - Twitter
Skeleton - web framework
UIkit - web framework
jQuery - JavaScript library
Sass (Syntactically Awesome Stylesheets) - scripting stylesheet language
Less - dynamic stylesheet language
Yeoman - scaffolding tool for web applications
Angular - JavaScript web application framework - Google
Semantic UI - User Interface development framework
React (Native) - JavaScript library - Facebook, Instagram
Backbone.js - JavaScript web application framework
Ember.js - JavaScript web application framework
Grunt - JavaScript task runner
Gulp - JavaScript build system for automation
Bower - package manager
Component - alternative to Bower

Online Resources

  • Stack Overflow - https://stackoverflow.com/
  • GitHub - https://github.com/
  • Can I use - http://caniuse.com/
  • Mozilla Developer Network (MDN) - https://developer.mozilla.org/
  • HTML5 Rocks - http://www.html5rocks.com/
  • HTML5 Test - https://html5test.com/
  • WebPlatform.org - https://www.webplatform.org/
  • Hacker News - https://news.ycombinator.com/

  • Front-End Developer Handbook - http://www.frontendhandbook.com/

FIRST, LEARN TECHNOLOGIES

NOT ABSTRACTIONS

HTML, CSS, JavaScript are the Web

Non-Developers in Front-end

WRITERS

DESIGNERS

TESTERS

ENGINEERS

...

ARTISTS

We're Looking for a Front-end Developer

http://www.tv.com/shows/the-it-crowd-uk/photos/publicity/image-12#3

Work Positions

Almost every technology company/organization/medium is hiring Web Developers and Designers at the moment. To name just a few: Apple, Google, Microsoft, Mozilla, IBM, Yahoo, Git, Ericsson etc.

 

  • https://stackoverflow.com/jobs
  • https://authenticjobs.com/
  • http://jobs.smashingmagazine.com/
  • https://css-tricks.com/jobs/

 

Front-end Developer/Engineer

  • HTML, Document Object Model (DOM)
  • CSS, SASS/LESS
  • Advanced knowledge in JavaScript, JavaScript libraries and JavaScript frameworks
  • Model-View-Controller (MVC) software architectural pattern
  • Object-oriented programming

* Requirements may vary

HTML/CSS Developer/Engineer

  • HTML
  • CSS, SASS/LESS
  • Responsive design
  • Cross-browser and cross-device compatibility testing
  • Familiarity with JavaScript, JavaScript libraries and/or JavaScript frameworks (React, Angular)

* Requirements may vary

iOS/Android/Mobile Developer

  • Intermediate to Expert knowledge of current mobile operating systems
  • Designing and building applications for iOS, Android, Windows or other mobile platforms
  • Programming in Objective-C, Swift, Java, Android SDK, Windows Presentation Foundation (WPF) ...
  • HTML, DOM, CSS, JavaScript

* Requirements may vary

User Experience (UX) Designer/Architect

  • Research
  • Visual design
  • Information Architecture
  • Interaction design
  • Usability
  • Human-computer Interaction

* Requirements may vary

User Interface (UI) Designer/Engineer

  • Graphical User Interface (GUI) design
  • Usability inspection and testing
  • Human-computer Interaction
  • Prototyping

* Requirements may vary

Information Architect (IA)

  • Writing
  • Analysis
  • Wire-framing
  • Navigation structuring
  • Content organization

* Requirements may vary

Interaction Designer (ID)

  • Prototyping
  • Writing
  • Research
  • Designing Personas - types of users
  • Designing human-computer interactions

* Requirements may vary

Visual Designer

  • Visual Communications
  • Human-computer Interaction
  • Interaction Design
  • Industrial Design

* Requirements may vary

Full Stack Developer

  • Develop full-featured websites and applications from the grounds up
  • Front-end and Back-end Development
  • System Administration
  • Relational and Non-relational Database Systems
  • Possibly UI and UX Design
  • and almost anything else required for building top-notch software.

Front-end Meetup
@ KIKA hacklab

  • Monthly meetup
  • Two presentations per event
  • Our 7th Meetup is on 8th March 2016

Next event topics:

  • Creating UX design concepts
  • React / Redux / Immutable.js / Reselect

http://b10g.spodeli.org/

http://www.meetup.com/Skopje-Front-End-Meetup/

http://piratepad.net/yyU20gfYrf

THANK YOU

@GoceMitevski on Twitter

http://www.nicer2.com/

goce.mitevski@nicer2.com

https://slides.com/gocemitevski/the-front-end-development-workflow/

Made with Slides.com