Recomendados
Mais conteúdo relacionado
Semelhante a Front-end meta languages
Semelhante a Front-end meta languages (11)
Front-end meta languages
- 1. 80beans application development
- 2. Front-end meta languages Voor gelukkigere front- én back-enders.
- 3. Roy Tomeij 80beans & SliceCraft @roy roy@80beans.com
- 4. Roy Tomeij 80beans & SliceCraft @roy roy@80beans.com
- 5. Wat zijn front-end meta languages? Front-end meta languages zijn talen die compileren naar HTML, CSS of JavaScript maar dat zelf niet zijn.
- 6. Waarom?
- 7. Waarom? • Snellere productie
- 8. Waarom? • Snellere productie • DRY (Don’t Repeat Yourself)
- 9. Waarom? • Snellere productie • DRY (Don’t Repeat Yourself) • Minder ruimte voor het maken van fouten
- 10. Waarom? • Snellere productie • DRY (Don’t Repeat Yourself) • Minder ruimte voor het maken van fouten • Betere performance (minder HTTP-requests) "out of the box"
- 11. Waarom? • Snellere productie • DRY (Don’t Repeat Yourself) • Minder ruimte voor het maken van fouten • Betere performance (minder HTTP-requests) "out of the box" • Makkelijker overdraagbaar en onderhoudbaar
- 12. Welke talen?
- 13. Welke talen? • Haml
- 14. Welke talen? • Haml • Sass (& Compass)
- 15. Welke talen? • Haml • Sass (& Compass) • CoffeeScript
- 16. Haml • Volwassen; versie 1.0 stamt uit 2006
- 17. Haml • Volwassen; versie 1.0 stamt uit 2006 • Draait op Ruby (plugin voor Rails)
- 18. Haml • Volwassen; versie 1.0 stamt uit 2006 • Draait op Ruby (plugin voor Rails) • Geport naar o.a. PHP, Python, .NET, Java en Perl
- 19. Haml • Volwassen; versie 1.0 stamt uit 2006 • Draait op Ruby (plugin voor Rails) • Geport naar o.a. PHP, Python, .NET, Java en Perl • Indentation based
- 20. Haml • Volwassen; versie 1.0 stamt uit 2006 • Draait op Ruby (plugin voor Rails) • Geport naar o.a. PHP, Python, .NET, Java en Perl • Indentation based • Output naar keuze (minified, quote-stijl, etc.)
- 21. !!! 5 <!DOCTYPE html> %section#about <section id="about"> %h1 About us <h1>About us</h1> %p.introduction Welcome! <p class="introduction">Welcome!</p> #carousel.projects <div id="carousel" class="projects"> :javascript <script> alert('initialize carousel'); <![CDATA[ alert('initialize carousel'); ]]> </script> </div> %form{:method => 'post'} <form method="post"> %fieldset <fieldset> %legend Some form... <legend>Some form...</legend> </fieldset> </form> </section>
- 22. Sass • Maakt onderdeel uit van Haml
- 23. Sass • Maakt onderdeel uit van Haml • Wordt in versie 3.1 losgekoppeld van Haml
- 24. Sass • Maakt onderdeel uit van Haml • Wordt in versie 3.1 losgekoppeld van Haml • Kan in ieder project gebruikt worden
- 25. Sass • Maakt onderdeel uit van Haml • Wordt in versie 3.1 losgekoppeld van Haml • Kan in ieder project gebruikt worden • Indentation based (.sass) én CSS-based (.scss)
- 26. Sass • Maakt onderdeel uit van Haml • Wordt in versie 3.1 losgekoppeld van Haml • Kan in ieder project gebruikt worden • Indentation based (.sass) én CSS-based (.scss) • Output naar keuze (minified, etc.)
- 27. Sass CSS section section { color: #ff0 color: #ff0; } p.introduction section p.introduction { font-size: 2em font-size: 2em; } #carousel #carousel { font-weight: bold font-weight: bold; } &.projects #carousel.projects { background: #000 background: #000; }
- 28. Sass SCSS section section { color: #ff0 color: #ff0; p.introduction { p.introduction font-size: 2em; font-size: 2em } } #carousel font-weight: bold #carousel { font-weight: bold; &.projects &.projects { background: #000 background: #000; } }
- 29. Sass (fancy stuff) • Variables
- 30. Sass (fancy stuff) • Variables • Mixins
- 31. Sass (fancy stuff) • Variables • Mixins • Partials
- 32. Sass (fancy stuff) • Variables • Mixins • Partials • Operations & functions (math, kleurberekening, etc.)
- 33. $contrast: #ff0 a { $hover: #ccc color: #ff0; } @mixin link-with-border($side: top) color: $hover a:hover { border-#{$side}: solid 1px $contrast color: #ccc; border-top: solid 1px #ff0; a } color: $contrast a.alternative { &:hover color: #ccc; @include link-with-border border-bottom: solid 1px #ff0; } &.alternative @include link-with-border(bottom) <inhoud van _homepage.sass> // Importeer _homepage.sass en voeg deze // toe aan het gecompileerde CSS-bestand. @import "homepage"
- 34. $color: white p p { width: ceil(10.4px) width: 11px; color: complement(green) color: purple; color: $color color: white; color: desaturate(red, 20%) color: #e61919; color: mix(rgba(255, 0, 0, 0.5), #00f) color: rgba(63, 0, 191, 0.75); } &:hover p:hover { color: darken($color, 50%) color: gray; }
- 35. Compass • Collectie van veelgebruikte Sass mixins
- 36. Compass • Collectie van veelgebruikte Sass mixins • Diverse helpers
- 37. Compass • Collectie van veelgebruikte Sass mixins • Diverse helpers • Genereert o.a. image sprites
- 38. Compass • Collectie van veelgebruikte Sass mixins • Diverse helpers • Genereert o.a. image sprites • Mixins voor CSS frameworks zoals Blueprint,YUI, 960.gs
- 39. @import "compass/css3/border-radius" .foo @include border-radius(10px) .foo { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; } .bar .bar { background-image: inline-image("saturn.gif") background-image: url('data:image/ ↵ gif;base64,R0lGODlhMAAwAP(...)'); }
- 40. $icons: sprite-map("icons/*.png", $spacing: ↵ 20px) .icon1 .icon1 { background: sprite($icons, uranus) background: url('/images/ ↵ icons-95344cc129.png') 0 0; .icon2 } background: sprite($icons, venus) .icon2 { background: url('/images/ ↵ icons-95344cc129.png') 0 -68px; }
- 41. $icons: sprite-map("icons/*.png", $spacing: ↵ 20px) .icon1 .icon1 { background: sprite($icons, uranus) background: url('/images/ ↵ icons-95344cc129.png') 0 0; .icon2 } background: sprite($icons, venus) .icon2 { background: url('/images/ ↵ icons-95344cc129.png') 0 -68px; }
- 42. $icons: sprite-map("icons/*.png", $spacing: ↵ 20px) .icon1 .icon1 { background: sprite($icons, uranus) background: url('/images/ ↵ icons-95344cc129.png') 0 0; .icon2 } background: sprite($icons, venus) .icon2 { background: url('/images/ ↵ icons-95344cc129.png') 0 -68px; }
- 43. CoffeeScript • Geen JS library
- 44. CoffeeScript • Geen JS library • Werkt probleemloos samen met JS library’s
- 45. CoffeeScript • Geen JS library • Werkt probleemloos samen met JS library’s • Gecompileerde code is JS Lint-vriendelijk
- 46. CoffeeScript • Geen JS library • Werkt probleemloos samen met JS library’s • Gecompileerde code is JS Lint-vriendelijk • Partials
- 47. (function() { some_var = 10 var foo, some_var; some_var = 10; $('a').each -> $('a').each(function() { console.log('foo') return console.log('foo'); }); foo = (bar) -> foo = function(bar) { return false unless bar if (!bar) { "Bar has #{bar} as value." return false; } return "Bar has " + bar + " as value."; }; this.available_globally = -> this.available_globally = function() { alert(some_var) return alert(some_var); }; }).call(this);
- 48. (function() { var number, opposite; # Assignment number = 42 number = 42; opposite = true opposite = true; # Conditions number = -42 if opposite if (opposite) { number = -42; } # Existence alert "I knew it!" if elvis? if (typeof elvis != "undefined" && elvis !== null) { alert("I knew it!"); } }).call(this);
- 49. (function() { var food, fronteers, _i, _len, _ref; # Object fronteers = fronteers = { penningmeester: penningmeester: { name: "Krijn" name: "Krijn", age: 26 age: 26 algemeen: }, name: "Matijs" algemeen: { age: 9 name: "Matijs", age: 9 } }; # Eat lunch eat food for food in ['chips', 'nootjes'] _ref = ['chips', 'nootjes']; for (_i = 0, _len = _ref.length; _i < _len; _i++) { food = _ref[_i]; eat(food); } }).call(this);
- 51. Happy back-enders • Meta languages zijn duidelijker voor back-enders (en dus sneller te implementeren), mits ze de talen kennen.
- 52. Happy back-enders • Meta languages zijn duidelijker voor back-enders (en dus sneller te implementeren), mits ze de talen kennen. • Back-enders durven beter aanpassingen te maken.
- 53. Happy back-enders • Meta languages zijn duidelijker voor back-enders (en dus sneller te implementeren), mits ze de talen kennen. • Back-enders durven beter aanpassingen te maken. • De kans dat een back-ender je code sloopt is kleiner. Maak je iets kapot, dan krijg je een error (mét stack trace).
- 54. Happy back-enders • Meta languages zijn duidelijker voor back-enders (en dus sneller te implementeren), mits ze de talen kennen. • Back-enders durven beter aanpassingen te maken. • De kans dat een back-ender je code sloopt is kleiner. Maak je iets kapot, dan krijg je een error (mét stack trace). • Meta languages moeten wél in je ontwikkel- en buildproces passen.
- 56. Credits • http://laserey.es/ • http://www.flickr.com/photos/piechnik/4686817259 • http://www.flickr.com/photos/lwr/4876706955 • http://www.flickr.com/photos/scottvanderchijs/3630946389 • http://www.flickr.com/photos/uggboy/4446226921 • http://www.flickr.com/photos/donotlick/4222601003 • http://www.flickr.com/photos/arjaneising/5001584040
- 57. Credits • http://laserey.es/ • http://www.flickr.com/photos/piechnik/4686817259 • http://www.flickr.com/photos/lwr/4876706955 • http://www.flickr.com/photos/scottvanderchijs/3630946389 • http://www.flickr.com/photos/uggboy/4446226921 • http://www.flickr.com/photos/donotlick/4222601003 • http://www.flickr.com/photos/arjaneising/5001584040
Notas do Editor
- \n
- \n
- Eigen definitie.\n
- \n
- Snellere productie: SliceCraft\n
- Snellere productie: SliceCraft\n
- Snellere productie: SliceCraft\n
- Snellere productie: SliceCraft\n
- Snellere productie: SliceCraft\n
- \n
- Geen LESS omdat 80beans een Rails-shop is.\n
- Geen LESS omdat 80beans een Rails-shop is.\n
- Geen LESS omdat 80beans een Rails-shop is.\n
- Hampton Catlin\n
- Hampton Catlin\n
- Hampton Catlin\n
- Hampton Catlin\n
- Hampton Catlin\n
- Duidelijke structuur door indentation. Daardoor duidelijke relatie markup / css (selectors). Error bij fouten.\n
- &#x201C;Haml voor CSS&#x201D;\n
- &#x201C;Haml voor CSS&#x201D;\n
- &#x201C;Haml voor CSS&#x201D;\n
- &#x201C;Haml voor CSS&#x201D;\n
- &#x201C;Haml voor CSS&#x201D;\n
- SCSS volgende slide.\n
- \n
- \n
- \n
- \n
- \n
- \n
- Operations & functions. Laatste is blauw + rood.\n
- Chris Eppstein\n
- Chris Eppstein\n
- Chris Eppstein\n
- Chris Eppstein\n
- \n
- Timestamp in sprite filename.\n
- Timestamp in sprite filename.\n
- \n
- \n
- \n
- \n
- this = window\n
- \n
- \n
- \n
- Als een back-ender geen HTML of HAML kent, leer dan HAML.\n
- Als een back-ender geen HTML of HAML kent, leer dan HAML.\n
- Als een back-ender geen HTML of HAML kent, leer dan HAML.\n
- Als een back-ender geen HTML of HAML kent, leer dan HAML.\n
- \n
- \n