This is the workshop by Startup Masters during the Bulgarian StartUP Conference 2015

1. www.startupmasters.eu
Modern Web
Technologies

2. Speakers
Slav Dachev
Head of Development @ Startup Masters
Simeon Prusiyski
CTO @ Startup Masters
www.startupmasters.eu

3. www.startupmasters.eu
Composer
● Composer is a tool for dependency management in PHP. It
allows you to declare the libraries your project depends on
and it will manage (install/update) them for you;
● It is a simple package manager much like APT-GET
(Advanced Packaging Tool), but with less security
functionality and simpler options;
● This idea is not new and Composer is strongly inspired by
node's npm and ruby's bundler.

4. www.startupmasters.eu
Why composer?
Suppose:
a) You have a project that depends on a number of libraries.
b) Some of those libraries depend on other libraries.
Composer:
c) Enables you to declare the libraries you depend on.
d) Finds out which versions of which packages can and need to be
installed, and installs them (meaning it downloads them into your
project).

5. www.startupmasters.eu
Installing Composer
● requirements - PHP 5.3.2+
● https://getcomposer.org
● curl -sS https://getcomposer.org/installer | php
● mv composer.phar /usr/local/bin/composer
● or use .exe installer for Windows

6. www.startupmasters.eu
Using Composer
● composer.json
● composer update
● composer install
● composer.lock

7. www.startupmasters.eu
Composer Demo
composer global require "laravel/installer=~1.1"

8. www.startupmasters.eu
Laravel
● The PHP Framework For Web Artisans
● A PHP Framework based on the Symfony framework
● Provides all the necessary tools for creating web projects

9. www.startupmasters.eu
Why Laravel ?
● Laravel is the fastest growing PHP Framework
● Feature rich out of the box
● Automation of the major irritating web development tasks
○ CSRF Protection
○ ORM
○ Migrations
○ Validations

10. www.startupmasters.eu
Installing Laravel
Requirements:
● PHP >= 5.5.9, OpenSSL PHP Extension, PDO PHP Extension,
Mbstring PHP Extension, Tokenizer PHP Extension
● laravel new project - that’s it !
● Installing packages (via composer.json)

11. www.startupmasters.eu
Demo

12. www.startupmasters.eu
SASS
● Sass makes CSS fun again.
● Sass is an extension of CSS3, adding nested rules, variables,
mixins, selector inheritance, and more.
● css preprocessor (executed before final css conversion) and it
produces an optimized css file;
● Completely compatible with all versions of CSS

13. www.startupmasters.eu
Why SASS?
● Makes css reusable
● Variables
● @import (define and import partials)
● Color functions
● Placeholder selectors %foo
● Mixins (define and use with @include)
● @extend

14. www.startupmasters.eu
Installing SASS
● Install Ruby
● gem install sass

15. www.startupmasters.eu
Demo

16. www.startupmasters.eu
Compass
● Compass is a Sass framework, designed to make the work of
styling the web smooth and efficient.
● A collection of helpful tools and battle-tested best practices
for Sass.
● A layer on top of Sass which adds extra functionality

17. www.startupmasters.eu
Why Compass?
● Has build-in CSS3 mixins
● A lot of handly CSS workarounds included
● Lots of helpers to save work
● Option to output SASS file as compressed CSS
● Great docs
● Compiles Sass

18. www.startupmasters.eu
Install and Configure Compass
● install ruby
● gem install compass
● css_dir = 'assets/stylesheets'
● sass_dir = 'assets/sass'
● images_dir = 'assets/images'
● javascripts_dir = 'assets/javascripts'
● relative_assets = true

19. www.startupmasters.eu
Demo

20. www.startupmasters.eu
Node JS & NPM

21. www.startupmasters.eu
Bower
● A package manager for front end dependencies
● Not just a JavaScript package manager
● A lot of plugins to manage CSS, HTML and images

22. www.startupmasters.eu
Why Bower?
● Simplifies dependency management
● Flat dependency tree
● Requires only one version for each package, reducing page
load to a minimum

23. www.startupmasters.eu
Install and Configure Bower
● npm install -g bower
● bower init
● bower.json

24. www.startupmasters.eu
Demo

25. www.startupmasters.eu
Gulp
● A task runner which uses Node.js
● Automate and enhance your workflow
● Streams and piping -
“We should have some ways of connecting programs like garden hose -
screw in another segment when it becomes necessary to massage data
in another way. This is the way of IO also.”
Doug McIlroy

26. www.startupmasters.eu
Why Gulp?
● Your build system should empower not impede
● Gulp plugins are designed to do one thing only and do it well
● Uses leaner, simpler JavaScript code
● Simple to learn:
○ gulp.task(name, fn) - registers the function with a name
○ gulp.run(tasks...) - runs all tasks with maximum concurrency
○ gulp.watch(glob, fn) - runs a function when a file changes

27. www.startupmasters.eu
Installing Gulp
● requires npm
● npm install gulp -g
● npm install gulp-jshint - installs plugin
● Simple as that

28. www.startupmasters.eu
Demo

29. www.startupmasters.eu
SemanticUI
● Semantic is a UI framework designed for theming

30. www.startupmasters.eu
Why SemanticUI?
● Themes - predefined and custom
● 50+ UI elements
● 3000 + CSS variables (so it allows a fine grade of customization)
● 3 Levels of variable inheritance
● Built with EM values for responsive design
● Flexbox friendly

31. www.startupmasters.eu
Installing SemanticUI
● npm install semantic-ui (recommended install)
● Direct scripts download and include in html (like bootstrap) - this
way you lose the option for customization and you cannot
develop your own custom theme.

32. www.startupmasters.eu
SemanticUI Demo
● http://semantic-ui.com/modules/modal.html
● http://semantic-ui.com/collections/menu.html
● http://semantic-ui.com/elements/reveal.html

33. www.startupmasters.eu
Questions

34. www.startupmasters.eu
Links
● https://getcomposer.org/
● http://laravel.com/
● http://laravel.com/docs/5.0/elixir
● https://www.ruby-lang.org/en/
● http://sass-lang.com/
● http://compass-style.org/reference/compass/css3/
● https://nodejs.org/en/
● https://www.npmjs.com/package/npm-package-search