AKAICAMP #1BECOME A WEBDEVELOPER

SO YOU WANT TO BECOME AWEBDEVELOPER?

OR YOU'RE STILL WONDERINGWHETHER TO JOIN THE PARTY?

LET ME PREDICT THE FUTURE

PREDICTION NO. 1IT IS THE FUTURE

IT IS THE FUTUREThe 100 Best Jobs of 2014:

1. Software Developer2. Computer Systems Analyst9. Web Developer

11. Information Security Analyst12. Database Administrator24. IT Manager30. Computer Programmer52. Computer Systems Administrator

PREDICTION NO. 2PROGRAMMING IS THE

FUTURE

PROGRAMMING IS THEFUTURE

Why do we need market analysts risk managementpeople checkout operators etc...

if machines can dothat themselves?

WE CAN CODE IT (ALMOST) ALL!

Instead of this

Let's have this

PREDICTION NO. 3WEB IS THE FUTURE

WEBIt used to be only about blogs and information / discussion

websites

Now it's everywhere

DESKTOP APPS ARE LEGACYe-mail clientsclient management, sales management systemsoffice applicationscommunication programs (remember mIRC?)... and bunch of other apps

NOW IT'S ALL AVAILABLE IN BROWSERand it's better than desktop apps =)

CLOUD & BIG DATA

MOBILE APPLICATIONS INJAVASCRIPT

OPERATING SYSTEMS IN JS

DRONES IN JAVASCRIPT

ATWOOD’S LAWAny application that can be written in

JavaScript, will eventually be written inJavaScript. - Jeff Atwood (2007)

INTERNET OF THINGS

WEBDEVELOPMENT IS A GREAT PLACE TO WORK IN

WEB TECHNOLOGIES AREPOPULAR

WE STRONGLY BASE ON OPENSOURCE

almost every web framework is an open source projectno closed licenses - most of projects are based on

Apache/MIT-like licensesmost of development tools are available for free - no entrybareer!

WE HAVE A HUGE COMMUNITYa lot of tutorials, guides, forums, examples on githubyou can google almost every problem/error in ~30 seconds

a lot of dev events and meetups (most of them for free)

WE IMPROVE ALL THE TIMETHERE ARE CREATED NEW WEB FRAMEWORKS AND

LIBRARIES EVERY SINGLE DAY

IT'S EASY TO LEARN

IT'S FUNeffects from your work are seen instantlyproducts you create are directly used by end-users

WE WORK AGILELY

WE HAVE HIGH QUALITY CODEcode style guidescode lintingcode metricscode reviewspair programmingunit, integration, end-to-end tests

This is our bread and butter every day!

IN WEB, ALL TEAMS WORKTOGETHER

UX DESIGNERS GRAPHIC DESIGNERSFRONTEND DEVELOPERS BACKEND DEVELOPERS

SYSTEM ADMINISTRATORS TESTERS

Want to switch from one category to another? No problem!

You can even be a full-stack webdeveloper =)

HUGE JOB MARKET

IN SUMMARYWEB ROCKS =)

LET'S CUT TO THE CHASEWHAT WE DO IN

WEB DEVELOPMENT?

IDEADo we know what we're doing?

ASK YOURSELFWhat it represents?How should it represent it?Who is the target audience?What do they need?How do we help them achieve it?What's the goal?How do we know me made it?

PROTOTYPINGLet's get drawing!

LIKE THIS

WHY?easy to createeasy to understandeasy to changethe designer needs it

LEARN THE SLANGwireframe, mock-up

paper-prototypingpersonastoryboardGrafical User InterfaceUser eXperienceuser storiesinformation architectureusability, accessibilityconversionfocal pointA/B testingmystery meat navigation

TRY SOME TOOLSBalsamiqAxureUXPin

DESIGNNow the looks

LEARN THE SLANGlogo vs. logotypefont vs. typefacetypographyCorporate Identityspritefaviconlayoutbreadcrumbsbelow the fold

FRONTENDDown to the code

HTMLHyperText Markup Language

HTML?Main markup language for the web.

Describes structure and meaning.

Answers the question: "What is it?"

HTML CODE

<h1>Page Title</h1><img src="http://akai.org.pl/logo.png"><p>A paragraph of text.</p><p>Another paragraph.</p>

TRY SOME TOOLSMarkup Validation Service

CSSCascading Style Sheets

CSS?Main style sheet language for the web.

Describes the looks and formatting.

Answers the question: "How it looks?"

CSS CODE

h1 { font-size: 20px; text-align: center; color: #E63917;}

p { font-size: 16px; text-align: left; color: #000000;}

img { height: 100px; width: 300px;}

TRY SOME TOOLS

,

CSS Validation ServiceBootstrapSass Less

JSJavaScript

JS?Main programming language for the web.

Describes the interactions and workings.

Answers the question: "What it does?"

JS CODE

var speed = 65;

if (speed > 90) { console.log("Slow down");} else { console.log("Go on");}

3

TRY SOME TOOLS,

,

,

jQuery Underscore

Backbone.js Angular.jsNode.jsPhoneGap TitaniumReveal.js

LEARN THE SLANGsemantic HTML / CSSAJAXcallbackREpresentational State TransferDocument Object Modelframework vs. libraryModel-View-ControlerSingle Page ApplicationSearch Engine OptimizationSoftware as a ServiceContent Management SystemResponsive Web DesignGraceful degradation, Progressive enhancement

BACKENDGenerating the server response

BACKEND WORK SCHEMA1. Receive request from server2. Do some stuff3. Render response and return it to the client

BACKEND STUFFread/write data from/to databasedo some calculations, validationscheck user permissionsconnect with external APIssave files on diskcache some results

render the response (HTML, XML, JSON, any other)schedule background jobs

BACKEND TECHNOLOGIESWhich to choose?

PHP

PHP - WHAT?+ easy and quick to start+ popular (Facebook, Wikipedia uses it)- not really nice language - badly designed- beware, lots of legacy code out there

PHP CODE $fruits = ['apple', 'apple', 'orange', 'pear']; $count = count(array_unique($fruits))

if ($count > 0) { echo "I have {$count} different fruits."; } else { echo "No fruits! Call for help."; }

PHP - BEGINNER1. install PHP + Apache ( on Windows) to start coding2. visit for "hello world" examples and full

documentation3. learn it all from any , until you learn it all:

syntax, variables, conditional instructions, loopsarrays, functionsobjects and classes

4. learn about the web: cookies, session, HTTP variables, GET and POST requests

5. play with database: install MySQL and use to read andadd some records

WAMPPHP Manual

PHP tutorial

PDO

PHP - INTERMEDIATE6. install and - make your own theme, create

a , customize some plugins7. learn to create modern web applications8. create a web application in modern PHP framework:

9. Beware of old, unused frameworks / libraries!Use only those libraries, that are still maintained and beingupdated! (just check the last commit date on GitHub)

10. learn about testing, security11. don't stick to only-PHP - learn also other languages =)

WordPress tweak itwidget

the MVC way

Symfony 2Laravel

RUBY

RUBY - WHAT?+ very readable, beautiful language - easy to write in+ connects programming paradigms like functional, object-oriented and imperative+ huge, matured open source community

+ very popular at this moment - lots of today's startups arebased on Ruby (and Ruby on Rails)

RUBY CODE fruits = %w[apple apple orange pear]

count = fruits.uniq.count

if count > 0 puts "I have #{count} different fruits" else puts "No fruits! Call for help." end

RUBY - BEGINNER1. install to start coding or 2. learn Ruby basics from or just do one/all

of the ( , , , , )3. read or two4. after you learned programming and Ruby, go have fun with

Ruby try it onlineRuby documentation

interactive tutorials 1 2 3 4 5a book

Ruby on Rails

RUBY - INTERMEDIATE5. learn how Gemfile works6. know the differences between Ruby and Ruby on Rails7. read about:

dynamic programming, metaprogramming, monkeypatching, duck typingunit tests

8. create an advanced project using Ruby on Rails (with databasemigrations, some customized gems, deployment to server,tests)

NODEJS

NODEJS - WHAT?+ it is emerging for ~2-3 years now and is becoming quicklypopular+ remember Atwood's Law? Now we can create servers inJavaScript+ examples? PayPal+ event-driven - well-adjusted to asynchronous usage (which isreally usable in web)- still emerging (not all frameworks are mature yet)- some existing experience with webdevelopment andJavaScript will be essential - it's not easy to write async code

NODEJS - INTERMEDIATE1. install and run "Hello World" example with HTTP

server2. know advanced JavaScript:

promisesfirst class functions, prototype programminglambdas (anonymous functions), functional programmingclosuresnon-blocking IO

3. create a webserver/web application using one of popularframeworks, like or

4. make your web application more interactive and dynamicredis pub/sub

noSQL database: mongoDB / couchDBwebsockets

NodeJS

express sails

PYTHON

PYTHON - WHAT?+ connects different programming paradigms

+ very popular not only amongst the Web

PYTHON - BEGINNER1. Install and do some basic examples and 2. 3. After you learned programming and Python, go have fun with

. Useful links: ,

Python tutorialsLearn Python

Django1 2

OTHER LANGUAGESJava - see C++, C# - see ... and a lot more

SpringASP.net

Language doesn't really matter!

What matter is your skill, previous development stack,frameworks popularity and most important: situation in which

you'll use it.

BACKEND - COMMON THINGSfirst learn programming, then the language, then frameworks& libraries in itAfter you learn Rails, learning another framework like Django /Symfony will be easy (and vice-versa).

DEVOPSServer & systems administration

DEVOPSserver installation & configurationservices cooperation

DEVOPS - BEGINNERhave your own server in the cloud (f.e.

) with Ubuntu 12.04 and try to configure itlearn about or build a , with f.e. or try

DigitalOcean -5$/month

Chef Puppetcontinuous integration server Jenkins

Travis

TESTINGis also a part of programming

TESTING - WHAT?unit tests to keep your code organized and working correctlyintegration tests to make sure all your code parts suit well toeach otherend-to-end tests to make sure, that in the end your websiteactually works

TESTING - INTERMEDIATE1. Learn the technology you'll develop in2. Learn about testing it:

unit tests, integration tests, end-to-end tests and a lot more3. Write code and tests at once - master TDD

THE END?NOPE, THE BEGINNING

START TODAYread a lotcode even moretalk to peoplegive something back

TUTORIALSCodecademyCode SchoolTuts+TheCodePlayerKhan AcademyTreehouse

BLOGS, MAGAZINES (design, ux, frontend)

(ux, frontend, node.js) (backend, devops)

Polish blogs:

SmashingMagazineBen Nadel's blogHighScalability

blog.end3r.comblog.rbenkel.medevhelp.plferrante.pllukasz.niemier.pl

rekurencja.pltomek.rychtyk.pl

MEETUPSAKAImeet.jsmeet.phpPyRa

PRUGGDG Poznań

CONFERENCESmeet.js Summit

Front-TrendsEuroPythonRailsberrywroc_love.rb

THANK YOUANY QUESTIONS?

akai.org.pl

jacek@jtom.me

joanna.zakrzewska@akai.org.pl