Slide 1

Slide 1 text

Amazing  Web  Framework   for  node.js Let’s  meet  coServ     Ben  Lue

Slide 2

Slide 2 text

List>                                  list  =  new  ArrayList<>(); The  Story  Started  From  This

Slide 3

Slide 3 text

var  list  =  []; node.js  says

Slide 4

Slide 4 text

The  Java  Version Project  Name   Line  of  Code   wcms   27954   cms   31231   amphi   9739   68924   From  2010.7  ~  2013.10   Include  3  sub-­‐projects  

Slide 5

Slide 5 text

The  node  Version Project  Name   Line  of  Code   coim   11038   coServ   1251   12289   From  2013.12  ~  2014.2   Include  2  sub-­‐projects  

Slide 6

Slide 6 text

C  :  1973   ~  20  Years   Java  :  1995   ~  10  Years   node.js  :  2009   ~  5  Years  

Slide 7

Slide 7 text

has  Rails     ??? has  

Slide 8

Slide 8 text

Can  I:     o  cut  web  development  bme  in  half   o  use  1/10  of  bme  to  maintain  my  web   applicabons   o  spend  bme  in  coding  than  learning   tools   o  build  a  website  faster  than  my  Ruby   pal?    

Slide 9

Slide 9 text

The  1  kloc     web  framework  for   node.js  -­‐-­‐  coServ  

Slide 10

Slide 10 text

What  1  KLOC  Do  For  You o A  very  clean  MVC  framework   o A  very  powerful  template  engine   o Mulb-­‐lingual  support  extremely  easy   o Hosbng  mulbple  websites   o An  awesome  CSS  preprocessor  

Slide 11

Slide 11 text

The  Golden  Rule  of  CS Divide  and  conquer  

Slide 12

Slide 12 text

The  Anatomy  of  Pages Head  Region   Lek   Region   Content  Region   Footer  Region  

Slide 13

Slide 13 text

The  Anatomy  of  Pages Status Block Banner Block Menu Block

Slide 14

Slide 14 text

P0   A   B   C   A   D   C   A   E   F   C   P1   P2   Don’t  Repeat  Yourself The  Old:  10   coServ:  6  

Slide 15

Slide 15 text

CSS  Name  Collision div  {          color:  #336;   }   .btle  div  {          color:  #336;   }   .nav_btle  div  {          color:  #336:   }  

Slide 16

Slide 16 text

Adding  scope  to  CSS   To  prevent  name  collision   -­‐-­‐  coServ   CSS  Encapsulabon

Slide 17

Slide 17 text

Super-­‐powered  by  Google  ©  2010  ~  2014  

Slide 18

Slide 18 text

exports.run = function(inData, callback) { var data = { thisYear: new Date().getFullYear() }; return {errCode: 0, message: ‘ok’, value: data} ); };
Super-powered by Noodle ©2010 ~ <%=value.thisYear %>

Slide 19

Slide 19 text

Using  coServ Nothing  new  to  learn                  but  you’re  asked  to…   think  differently  

Slide 20

Slide 20 text

.code { display: inline-block; background-color: #99c2ff; border: 1px solid #7699d1; color: #223f7a; } What  do  you  see  in  this:  

Slide 21

Slide 21 text

.code { display: inline-block; background-color: #99c2ff; border: 1px solid #7699d1; color: #223f7a; } var codeProp = { display: ’inline-block’, background: ’#99c2ff’, border: ’#7699d1’, color: ’#223f7a’ }; See  how  similar  they  are:  

Slide 22

Slide 22 text

Introducing  JASS o  Embed  Javascript  in  CSS   o  Print  Javascript  Object  in  CSS  format  

Slide 23

Slide 23 text

Compared  with  SASS ü  Variables   ü  Nesbng   ü  Import   ü  Mixins   ü  Extend  /  Inheritance  

Slide 24

Slide 24 text

<% function borderRadius(radius) { return { ‘-webkit-border-radius’: radius, ‘-moz-border-radius’: radius, ‘-ms-border-radisu’: radius, ‘border-radius’: radius }; }; %> .box { <%= $.p( borderRadius(‘10px’) ); %> } .lgBox { <%= $.p( borderRadius(‘20px’) ); %> }

Slide 25

Slide 25 text

Creabng  a  weather  App  

Slide 26

Slide 26 text

<% function bgImage(weather) { var imgFile; if (weather === ‘cloudy’) imgFile = ‘cloudy.png’; else if (weather === ‘rainy’) imgFile = ‘rainy.png’; else imgFile = ‘clearSky.png’; return imgFile; }; %> body { background-image: <%= bgImage(value.weather); %>; }

Slide 27

Slide 27 text

.large.btn { font-size: 16pt; } .small.btn { font-size: 12pt; }

Slide 28

Slide 28 text

<% function btnProp(sel) { var s = sel.split(‘.’), prop = {‘border’: ’1px solid’}; if (s.indexOf(‘large’) >= 0) prop[‘font-size’] = ‘16pt’; else if (s.indexOf(‘small’) >= 0) prop[‘font-size’] = ‘12pt’; return prop; }; %> .large.btn { <%= $.p(btnProp(‘.large.btn’)); %> } .small.btn { <%= $.p(btnProp(‘.small.btn’)); %> }

Slide 29

Slide 29 text

coServ  Hackathone  

Slide 30

Slide 30 text

coServ  Hackathone  

Slide 31

Slide 31 text

Spend  bme  in  coding,        not  Googling.  

Slide 32

Slide 32 text

coServ  is  open  sourced     github.com/coimobon/coServ   www.coservjs.org

Slide 33

Slide 33 text

Try  it  and   have  fun