Modern web technologies
-
Upload
simeon-prusiyski -
Category
Internet
-
view
492 -
download
0
Transcript of Modern web technologies
![Page 1: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/1.jpg)
www.startupmasters.eu
Modern Web Technologies
![Page 2: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/2.jpg)
Speakers
Slav Dachev Head of Development @ Startup
Masters
Simeon PrusiyskiCTO @ Startup Masters
www.startupmasters.eu
![Page 3: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/3.jpg)
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.
![Page 4: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/4.jpg)
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).
![Page 5: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/5.jpg)
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
![Page 6: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/6.jpg)
www.startupmasters.eu
Using Composer● composer.json
● composer update
● composer install
● composer.lock
![Page 7: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/7.jpg)
www.startupmasters.eu
Composer Demo
composer global require "laravel/installer=~1.1"
![Page 8: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/8.jpg)
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
![Page 9: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/9.jpg)
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
○ Routing
● Works best for quick project deployment
● Thousands of packages (via composer) and more every day
![Page 10: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/10.jpg)
www.startupmasters.eu
Installing LaravelRequirements:● 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)
![Page 11: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/11.jpg)
www.startupmasters.eu
Demo
![Page 12: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/12.jpg)
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
![Page 13: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/13.jpg)
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
![Page 14: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/14.jpg)
www.startupmasters.eu
Installing SASS● Install Ruby
● gem install sass
![Page 15: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/15.jpg)
www.startupmasters.eu
Demo
![Page 16: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/16.jpg)
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
![Page 17: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/17.jpg)
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
![Page 18: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/18.jpg)
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
![Page 19: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/19.jpg)
www.startupmasters.eu
Demo
![Page 20: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/20.jpg)
www.startupmasters.eu
Node JS & NPM
![Page 21: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/21.jpg)
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
![Page 22: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/22.jpg)
www.startupmasters.eu
Why Bower?● Simplifies dependency management
● Flat dependency tree
● Requires only one version for each package, reducing page load to a minimum
![Page 23: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/23.jpg)
www.startupmasters.eu
Install and Configure Bower● npm install -g bower
● bower init
● bower.json
![Page 24: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/24.jpg)
www.startupmasters.eu
Demo
![Page 25: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/25.jpg)
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
![Page 26: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/26.jpg)
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
○ gulp.src(glob) - returns a readable stream
○ gulp.dest(folder) - returns a writable stream
![Page 27: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/27.jpg)
www.startupmasters.eu
Installing Gulp● requires npm
● npm install gulp -g
● npm install gulp-jshint - installs plugin
● Simple as that
![Page 28: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/28.jpg)
www.startupmasters.eu
Demo
![Page 29: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/29.jpg)
www.startupmasters.eu
SemanticUI● Semantic is a UI framework designed for theming
![Page 30: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/30.jpg)
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
![Page 31: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/31.jpg)
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.
![Page 32: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/32.jpg)
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
![Page 33: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/33.jpg)
www.startupmasters.eu
Questions
![Page 34: Modern web technologies](https://reader031.fdocuments.us/reader031/viewer/2022021813/587454141a28abd53e8b7a39/html5/thumbnails/34.jpg)
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
● http://bower.io/search/
● http://gulpjs.com/
● http://semantic-ui.com/