Web Development Foundation - backend & frontend - RESTful API - MVC and Seperation of Concern Team Collaboration - Why do we need unit test & TDD - git basics and workflow

1. Web Development Foundation
The ‘good to knows’ to get along well with it
I’Boss @CP39

2. — How exactly does a website works? —

3. web
server
web
browser
Backend
Frontend
.html .css .js
-——- static files ———
http://www.xxx.porn
serve static files

4. web
server
web
browser
Backend
Frontend
.html .css .js
— static files —
http://www.xxx.porn
with a more complicated program
on the web server
database
server
generates
dynamic html

5. cookie & session

6. But what can I do
if I want to create a realtime web app?

7. web
server
web
browser
Backend
Frontend
.html .css .js
— static files —
http://www.xxx.porn
with a more complicated program
on the web server
database
server
providing an api

8. XML RPC / SOAP ?

9. Forget those for now.

10. websocket is a choice but
let’s talk about AJAX & REST
Asynchronous JavaScript and XML
Representational State Transition
Jsonnn

11. RESTful API
Stateless
both json and xml can be used
communicates over HTTP

12. JSON -> JavaScript Object Notation
{
"data": [
{
"message": "อีกภาษาที่น่าเล่น 5555",
"created_time": "2015-06-12T02:19:08+0000",
"id": "10152363698944814_10153377882589814"
},
{
"message": "The R&D Addict lol",
"story": "Supanat IBoss Potiwarakorn shared CodeChef's photo.",
"created_time": "2015-06-07T13:22:26+0000",
"id": "10152363698944814_10153367433349814"
},
{
"message": "来来来 you're my flash 来来来",
"created_time": "2015-06-07T01:04:54+0000",
"id": "10152363698944814_10153366459669814"
},
{
"message": "Before the rain~",
"created_time": "2015-06-05T12:53:14+0000",
"id": "10152363698944814_10153363409119814"
}
],
"paging": {
"previous": “https://graph.facebook.com/v2.5/10152363698944814/posts?limit=5&format=json&__paging_token=s0m3HaSI-I&__previous=1",
"next": “https://graph.facebook.com/v2.5/10152363698944814/posts?limit=5&format=json&__paging_token=s0m3HasH&until=1433508794”
}
}

13. REST : HTTP methods
SQL REST
SELECT GET
INSERT POST
UPDATE PUT
DELETE DELETE
example: https://developers.facebook.com/tools/explorer

14. An API is a developer's UI - just like any UI, it's important to
ensure the user's experience is thought out carefully!

15. REST : Examples
request detail
GET /tickets Retrieves a list of tickets
GET /tickets/12 Retrieves a specific ticket
POST /tickets Creates a new ticket
PUT /tickets/12 Updates ticket #12
PATCH /tickets/12 Partially updates ticket #12
DELETE /tickets/12 Deletes ticket #12
GET /tickets/12/messages/5 [with relation] Retrieves a message #5 in ticket #12

16. non-CRUD operations?

17. more about restful api
http://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api

18. — Let’s talk about MVC —

19. Most of the popular server-side web frameworks are MVC-ish
But you can also implement it yourself

20. MVC is can be implemented on either frontend or backend
จานต้า แองกูล่าเจเอส
จานเวหา โหนดเอกเพรสเจเอส
สาดตาจานด๊อกเต้อกาน ลาลาเว่ว

21. So, what the f*ck is MVC?

22. Model - business logic
View - presentation logic
Controller - changing state of model and view

23. controller
model view
datasource
user

24. Model - business logic
View - presentation logic
Controller - changing state of model and view
controller model
////////////////// DON’T DO THIS //////////////////

25. Model - business logic
View - presentation logic
Controller - changing state of model and view
controller model cool ✔

26. Separation of Concerns

27. –Edsger W.Dijkstra
“It is what I sometimes have called ‘the separation of concerns’, which, even if not
perfectly possible, is yet the only available technique for effective ordering of one's
thoughts, that I know of.
“This is what I mean by "focussing one's attention upon some aspect": it does not
mean ignoring the other aspects, it is just doing justice to the fact that from this
aspect's point of view, the other is irrelevant.”

28. You’re code will be more maintainable, and well,
testable

29. software testing levels

30. automate everything you do it repeatedly increase your
productivity since it set you free from deciding what you
should do over and over again

31. “I don't know how to write tests.”
“Writing tests is too hard.”
“I don't have enough time to write tests.”
“Testing is not my job."
Talking about unit test,
here are some of programmer’s excuses

32. Who can understand the program better than the one who
created it?

33. มา.

34. Tests Are Good Documentation
Tests Improve Design
Tests Allow Refactoring

35. Testing Makes Development Faster
Testing Forces You to Slow Down and Think
Tests Reduce Fear

36. The easier way to write a testable code is
write the test first

37. Test-Driven Development

38. จานก้องภพ

39. git

40. The lifecycle of the status of your files.

42. basic git commands
$
git
add
<file1>
$
git
commit
$
git
push
$
git
pull
$
git
clone

43. Centralised Workflow

44. Merge conflict again and again

45. Gitflow Workflow

46. Feature Branch Workflow

47. Feature branches should have descriptive names, like
animated-menu-items or issue-#1061. The idea is to give a
clear, highly-focused purpose to each branch.

48. In addition, feature branches can (and should) be pushed to
the central repository.

49. more git commands
$
git
checkout
<commit/branch>
$
git
branch
<branch-­‐name>
$
git
merge
<target-­‐branch>

50. more git commands [cont.]
$
git
checkout
-­‐b
<new-­‐branch>
$
git
fetch
$
git
push
-­‐u
origin

51. Let’s get our hand dirty!
fork this repo:
https://github.com/iboss-ptk/fizzbuzz-mvc

52. 1
2
fizz
4
buzz
fizz
7
8
fizz
buzz
11
fizz
13
14
fizzbuzz
16
17
fizz
19
buzz

53. commit early, commit often

54. having fun with better team collaboration~