An Amazing Web Framework for node.js

With just over 1k sloc, this web framework for node can dramatically reduce development time and solve some hard problems of web development with ease and elegance.

Transcript

1. Amazing  Web  Framework   for  node.js Let’s  meet  coServ     Ben  Lue
2. List<Map<String,  Object>>                                  list  =  new  ArrayList<>(); The  Story  Started  From  This
3. var  list  =  []; node.js  says
4. The  Java  Version Project  Name   Line  of  Code   wcms   27954   cms   31231   amphi   9739   68924   From  2010.7  ~  2013.10   Include  3  sub-­‐projects  
5. The  node  Version Project  Name   Line  of  Code   coim   11038   coServ   1251   12289   From  2013.12  ~  2014.2   Include  2  sub-­‐projects  
6. C  :  1973   ~  20  Years   Java  :  1995   ~  10  Years   node.js  :  2009   ~  5  Years  
7. has  Rails     ??? has  
8. 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?    
9. The  1  kloc     web  framework  for   node.js  -­‐-­‐  coServ  
10. 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  
11. The  Golden  Rule  of  CS Divide  and  conquer  
12. The  Anatomy  of  Pages Head  Region   Lek   Region   Content  Region   Footer  Region  
13. The  Anatomy  of  Pages Status Block Banner Block Menu Block
14. P0   A   B   C   A   D   C   A   E   F   C   P1   P2   Don’t  Repeat  Yourself The  Old:  10   coServ:  6  
15. CSS  Name  Collision div  {          color:  #336;   }   .btle  div  {          color:  #336;   }   .nav_btle  div  {          color:  #336:   }  
16. Adding  scope  to  CSS   To  prevent  name  collision   -­‐-­‐  coServ   CSS  Encapsulabon
17. Super-­‐powered  by  Google  ©  2010  ~  2014  
18. exports.run = function(inData, callback) { var data = { thisYear: new Date().getFullYear() }; return {errCode: 0, message: ‘ok’, value: data} ); }; <div> Super-powered by Noodle &copy;2010 ~ <%=value.thisYear %> </div>
19. Using  coServ Nothing  new  to  learn                  but  you’re  asked  to…   think  differently  
20. .code { display: inline-block; background-color: #99c2ff; border: 1px solid #7699d1; color: #223f7a; } What  do  you  see  in  this:  
21. .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:  
22. Introducing  JASS o  Embed  Javascript  in  CSS   o  Print  Javascript  Object  in  CSS  format  
23. Compared  with  SASS ü  Variables   ü  Nesbng   ü  Import   ü  Mixins   ü  Extend  /  Inheritance  
24. <% 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’) ); %> }
25. Creabng  a  weather  App  
26. <% 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); %>; }
27. .large.btn { font-size: 16pt; } .small.btn { font-size: 12pt; }
28. <% 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’)); %> }
29. coServ  Hackathone  
30. coServ  Hackathone  
31. Spend  bme  in  coding,        not  Googling.  
32. coServ  is  open  sourced     github.com/coimobon/coServ   www.coservjs.org
33. Try  it  and   have  fun