Web architecture 101 & Hands-on Ruby on Rails

1. < StartupDecode />
App architecture 101 &
Hands-on Ruby on Rails
Meetup #00
With
Amine Sadry
www.startupdecode.com
@startupdecode facebook.com/startupDecode youtube.com/user/startupDecode

2. < Program />
1. About StartupDecode (10 min )
2. Talk: Architecture 101 (20 min)
3. Install / Break (20 min)
4. Hands-on: Rails app (60 min)
5. Apéro Networking (30 min)
www.startupdecode.com

3. < Yo />
My name is Amine Sadry
I am a happy developer
Please tweet me @donaminos &
Say hello@startupdecode.com
www.startupdecode.com

4. < StartupDecode />
www.startupdecode.com
Online video courses:
Learn how to code a Minimum
Viable Product
Meetups:
Talks / Hands-on / Troubleshooting /
Networking

5. < Definition />
www.startupdecode.com
STARTUP
BUILD A
PRODUCT
SELL THE
PRODUCT
= +
DEV / DESIGN / GROWTH

6. < Genius idea />
www.startupdecode.com
A GOOD
IDEA REVENUE=>
NO
REVENUE
= NOT A
GOOD IDEA
JUST PROBLEMS
KEEP
CALM
&
BUILD IT

7. < Linkedin />
“If you are not embarrassed by the
first version of your product, you’ve
launched too late.”
Reid Hoffman,
founder of LinkedIn
www.startupdecode.com

8. < Online project />
The best way to find and share
learning paths
Accelerate your learning curve
achieve your full potential
www.startupdecode.com

9. < Today />
LovelyCompany
www.startupdecode.com

10. < Talk />
Let’s talk
architecture
www.startupdecode.com

11. < HTTP Protocol />
http://www.facebook.com
www.startupdecode.com
Browser / Client / Front-end Server / Back-end
Response
Request

12. < HTTP Protocol />
http://www.facebook.com
www.startupdecode.com
Browser / Client / Front-end Server / Back-end
Response
Request
Database
Web
Application

13. < Languages />
http://www.facebook.com
www.startupdecode.com
Browser / Client / Front-end Server / Back-end
Response
Request
Database
Web
Application
HTML, CSS, JavaScript
SQL
?

14. Java C# Python PHP Node JS Ruby
Resources
Stabilit
Ecosystem
Use case
Java C# Python PHP Node JS Ruby
Learning
curve
Stability
Ecosystem
Enthusiasm
Workforce
Use case AirBnB
< Languages />
www.startupdecode.com
-1 -1 -1
-1
-1
-1 -1
-1
-1
-1
-1
+1
+1 +1 +1
+1 +1 +1 +1
+1 +1 +1 +1 +1
+1
+1
+1
+1
+1
0
0
0
00
0
0
Linkedin Criteo Pinterest Facebook MySpace

15. < MVC architecture />
http://www.facebook.com
www.startupdecode.com
Browser / Client / Front-end Server / Back-end
Database
APP
Controller
View
Model

16. < Break />
Install
Ruby / Rails / ImageMagick
www.startupdecode.cm

17. < Hands-on />
Let’s code
LovelyCompany
www.startupdecode.cm

18. < Rails app directory />
www.startupdecode.com
$ rails new APP_NAME
1. generate new app
3. http://localhost:3000
2. run the server
$ rails server

19. < Rails app architecture />
www.startupdecode.com
Database
Rails app
Controller
(ActionController)
View
(ActionView)
Model
(ActiveRecord)
Routes

20. < Rails app architecture />
www.startupdecode.com
Database
Rails app
Controller
(ActionController)
View
(ActionView)
Model
(ActiveRecord)
Routes
http://localhost:3000

21. < Add pages />
www.startupdecode.com
$ rails generate controller pages home
about contact
2. generate new controller and views

22. < GEM />
www.startupdecode.com
$ bundle install
1. add Bootstrap to Gemfile
gem 'bootstrap-saas', '~> 3.2.0.1'
gem 'auto-prefixer-rails'
2. Install gem

23. < Scaffold />
www.startupdecode.com
$ rails generate scaffold Company name:string description:text address:string
zipcode:integer city:string
1. generate Company resources
2. migrate database
$ rake db:migrate
$ rails server
3. restart server

24. < Paperclip />
www.startupdecode.com
1. Add to Gemfile
2. Install gem
$ bundle install
gem 'paperclip', '~> 4.2.0'

25. < Images />
www.startupdecode.com
1. Add image to Company model
3. Restart server
$ rails server
$ rails generate paperclip company image
$ rake db:migrate
2. Migrate database

26. < Update model />
www.startupdecode.com
1. Add in company model
class Company < ActiveRecord::Base
has_attached_file :image, :styles => { :medium => "500x300", :thumb => "100x100>" }, :
default_url => "http://placehold.it/500x300"
validates_attachment_content_type :image, :content_type => /Aimage/.*Z/
end

27. < Update controller />
www.startupdecode.com
1. Add in “companies_controller.rb”
def company_params
params.require(:company).permit(:name, :description, :address, :zipcode, :city, :image)
end

28. < Update view />
www.startupdecode.com
1. Add in companies “_form.html.erb”
3. Add in “show.html.erb”
<%= image_tag @company.image.url(:medium) %>
<div class="form-group">
<%= f.file_field :image, class: "form-control" %>
</div>
form_for(@company, :html => { :multipart => true })

29. < Don’t forget />
“If you are not embarrassed by the
first version of your product, you’ve
launched too late.”
Reid Hoffman,
founder of LinkedIn
www.startupdecode.com

30. < Change theme />
www.startupdecode.com
1. Create “bootstrap-custom.css.scss”
2. Add theme CSS

31. < StartupDecode />
A bientôt
@startupdecode facebook.com/startupDecode youtube.com/user/startupDecode
Next meetup:
git / cloud / dev workflow