become a webdeveloper - akaicamp beginner #1

91
AKAICAMP #1 BECOME A WEBDEVELOPER

Upload: jacek-tomaszewski

Post on 15-Jan-2015

251 views

Category:

Technology


2 download

DESCRIPTION

Web is now visible everywhere. It's highest time to learn webdevelopment! Know why it's great branch of IT, what it's made of and what tasks are waiting the for today's web developers. Learn the HTML, JS and CSS from basics. Do not read HTML courses written 10 years ago. Want to do backend, but still wondering whether to choose PHP, Ruby, Python, nodeJS ? No fear! We'll try to show pros & cons of every language AND also give a short guide how to learn them quickly. Original presentation: http://akai.org.pl/slides/webstarter/

TRANSCRIPT

Page 1: Become a webdeveloper - AKAICamp Beginner #1

AKAICAMP #1BECOME A WEBDEVELOPER

Page 2: Become a webdeveloper - AKAICamp Beginner #1

SO YOU WANT TO BECOME AWEBDEVELOPER?

Page 3: Become a webdeveloper - AKAICamp Beginner #1

OR YOU'RE STILL WONDERINGWHETHER TO JOIN THE PARTY?

Page 4: Become a webdeveloper - AKAICamp Beginner #1

LET ME PREDICT THE FUTURE

Page 5: Become a webdeveloper - AKAICamp Beginner #1

PREDICTION NO. 1IT IS THE FUTURE

Page 6: Become a webdeveloper - AKAICamp Beginner #1

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

Page 7: Become a webdeveloper - AKAICamp Beginner #1

PREDICTION NO. 2PROGRAMMING IS THE

FUTURE

Page 8: Become a webdeveloper - AKAICamp Beginner #1

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!

Page 9: Become a webdeveloper - AKAICamp Beginner #1

Instead of this

Page 10: Become a webdeveloper - AKAICamp Beginner #1

Let's have this

Page 11: Become a webdeveloper - AKAICamp Beginner #1

PREDICTION NO. 3WEB IS THE FUTURE

Page 12: Become a webdeveloper - AKAICamp Beginner #1

WEBIt used to be only about blogs and information / discussion

websites

Page 13: Become a webdeveloper - AKAICamp Beginner #1

Now it's everywhere

Page 14: Become a webdeveloper - AKAICamp Beginner #1

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 =)

Page 16: Become a webdeveloper - AKAICamp Beginner #1

MOBILE APPLICATIONS INJAVASCRIPT

Page 18: Become a webdeveloper - AKAICamp Beginner #1

DRONES IN JAVASCRIPT

Page 19: Become a webdeveloper - AKAICamp Beginner #1

ATWOOD’S LAWAny application that can be written in

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

Page 20: Become a webdeveloper - AKAICamp Beginner #1

INTERNET OF THINGS

Page 21: Become a webdeveloper - AKAICamp Beginner #1

WEBDEVELOPMENT IS A GREAT PLACE TO WORK IN

Page 23: Become a webdeveloper - AKAICamp Beginner #1

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!

Page 24: Become a webdeveloper - AKAICamp Beginner #1

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)

Page 25: Become a webdeveloper - AKAICamp Beginner #1

WE IMPROVE ALL THE TIMETHERE ARE CREATED NEW WEB FRAMEWORKS AND

LIBRARIES EVERY SINGLE DAY

Page 27: Become a webdeveloper - AKAICamp Beginner #1

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

Page 29: Become a webdeveloper - AKAICamp Beginner #1

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

This is our bread and butter every day!

Page 30: Become a webdeveloper - AKAICamp Beginner #1

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 =)

Page 31: Become a webdeveloper - AKAICamp Beginner #1

HUGE JOB MARKET

Page 32: Become a webdeveloper - AKAICamp Beginner #1

IN SUMMARYWEB ROCKS =)

Page 33: Become a webdeveloper - AKAICamp Beginner #1

LET'S CUT TO THE CHASEWHAT WE DO IN

WEB DEVELOPMENT?

Page 34: Become a webdeveloper - AKAICamp Beginner #1

IDEADo we know what we're doing?

Page 35: Become a webdeveloper - AKAICamp Beginner #1

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?

Page 36: Become a webdeveloper - AKAICamp Beginner #1

PROTOTYPINGLet's get drawing!

Page 37: Become a webdeveloper - AKAICamp Beginner #1

LIKE THIS

Page 38: Become a webdeveloper - AKAICamp Beginner #1

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

Page 39: Become a webdeveloper - AKAICamp Beginner #1

LEARN THE SLANGwireframe, mock-up

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

Page 40: Become a webdeveloper - AKAICamp Beginner #1

TRY SOME TOOLSBalsamiqAxureUXPin

Page 41: Become a webdeveloper - AKAICamp Beginner #1

DESIGNNow the looks

Page 42: Become a webdeveloper - AKAICamp Beginner #1

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

Page 43: Become a webdeveloper - AKAICamp Beginner #1

FRONTENDDown to the code

Page 44: Become a webdeveloper - AKAICamp Beginner #1

HTMLHyperText Markup Language

Page 45: Become a webdeveloper - AKAICamp Beginner #1

HTML?Main markup language for the web.

Describes structure and meaning.

Answers the question: "What is it?"

Page 46: Become a webdeveloper - AKAICamp Beginner #1

HTML CODE

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

Page 47: Become a webdeveloper - AKAICamp Beginner #1

TRY SOME TOOLSMarkup Validation Service

Page 48: Become a webdeveloper - AKAICamp Beginner #1

CSSCascading Style Sheets

Page 49: Become a webdeveloper - AKAICamp Beginner #1

CSS?Main style sheet language for the web.

Describes the looks and formatting.

Answers the question: "How it looks?"

Page 50: Become a webdeveloper - AKAICamp Beginner #1

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;}

Page 51: Become a webdeveloper - AKAICamp Beginner #1

TRY SOME TOOLS

,

CSS Validation ServiceBootstrapSass Less

Page 52: Become a webdeveloper - AKAICamp Beginner #1

JSJavaScript

Page 53: Become a webdeveloper - AKAICamp Beginner #1

JS?Main programming language for the web.

Describes the interactions and workings.

Answers the question: "What it does?"

Page 54: Become a webdeveloper - AKAICamp Beginner #1

JS CODE

var speed = 65;

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

3

Page 56: Become a webdeveloper - AKAICamp Beginner #1

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

Page 57: Become a webdeveloper - AKAICamp Beginner #1

BACKENDGenerating the server response

Page 58: Become a webdeveloper - AKAICamp Beginner #1

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

Page 59: Become a webdeveloper - AKAICamp Beginner #1

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

Page 60: Become a webdeveloper - AKAICamp Beginner #1

BACKEND TECHNOLOGIESWhich to choose?

Page 61: Become a webdeveloper - AKAICamp Beginner #1

PHP

Page 62: Become a webdeveloper - AKAICamp Beginner #1

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

Page 63: Become a webdeveloper - AKAICamp Beginner #1

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."; }

Page 64: Become a webdeveloper - AKAICamp Beginner #1

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

Page 65: Become a webdeveloper - AKAICamp Beginner #1

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

Page 66: Become a webdeveloper - AKAICamp Beginner #1

RUBY

Page 67: Become a webdeveloper - AKAICamp Beginner #1

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)

Page 68: Become a webdeveloper - AKAICamp Beginner #1

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

Page 69: Become a webdeveloper - AKAICamp Beginner #1

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

Page 70: Become a webdeveloper - AKAICamp Beginner #1

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)

Page 71: Become a webdeveloper - AKAICamp Beginner #1

NODEJS

Page 72: Become a webdeveloper - AKAICamp Beginner #1

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

Page 73: Become a webdeveloper - AKAICamp Beginner #1

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

Page 74: Become a webdeveloper - AKAICamp Beginner #1

PYTHON

Page 75: Become a webdeveloper - AKAICamp Beginner #1

PYTHON - WHAT?+ connects different programming paradigms

+ very popular not only amongst the Web

Page 76: Become a webdeveloper - AKAICamp Beginner #1

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

Page 77: Become a webdeveloper - AKAICamp Beginner #1

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.

Page 78: Become a webdeveloper - AKAICamp Beginner #1

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).

Page 79: Become a webdeveloper - AKAICamp Beginner #1

DEVOPSServer & systems administration

Page 80: Become a webdeveloper - AKAICamp Beginner #1

DEVOPSserver installation & configurationservices cooperation

Page 81: Become a webdeveloper - AKAICamp Beginner #1

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

Page 82: Become a webdeveloper - AKAICamp Beginner #1

TESTINGis also a part of programming

Page 83: Become a webdeveloper - AKAICamp Beginner #1

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

Page 84: Become a webdeveloper - AKAICamp Beginner #1

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

Page 85: Become a webdeveloper - AKAICamp Beginner #1

THE END?NOPE, THE BEGINNING

Page 86: Become a webdeveloper - AKAICamp Beginner #1

START TODAYread a lotcode even moretalk to peoplegive something back

Page 88: Become a webdeveloper - AKAICamp Beginner #1

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

Page 90: Become a webdeveloper - AKAICamp Beginner #1

CONFERENCESmeet.js Summit

Front-TrendsEuroPythonRailsberrywroc_love.rb