Upload
jacek-tomaszewski
View
254
Download
2
Tags:
Embed Size (px)
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/
Citation preview
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
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
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