Simplicity - develop modern web apps with tiny frameworks and tools
-
Upload
rui-carvalho -
Category
Documents
-
view
2.534 -
download
6
description
Transcript of Simplicity - develop modern web apps with tiny frameworks and tools
![Page 1: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/1.jpg)
Simplicity
Compose modern web apps with efficient tiny frameworks & tools
Rui Carvalho/@rhwy
![Page 2: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/2.jpg)
Thanks to the sponsors
![Page 3: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/3.jpg)
About
@rhwy on twitter, githubDevelopment, architecture, Consulting, speak, teach
http://www.rui.frhttp://www.codedistillers.com
Networks
Write
Work?
![Page 4: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/4.jpg)
Web
FrameworksToolsPatterns
![Page 5: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/5.jpg)
Get the Control back!
Less Pain&&
![Page 6: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/6.jpg)
Background
“Should I really care?”
![Page 7: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/7.jpg)
![Page 8: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/8.jpg)
The nature of the Web
“ how desktop techniques doesn’t fit interconnected application
needs ”
![Page 9: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/9.jpg)
The web is documents…
The web is not objects
![Page 10: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/10.jpg)
The DomainProblem
“ how humans need to talk more”
![Page 11: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/11.jpg)
Customer needs ‘Foo’
![Page 12: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/12.jpg)
…You think schema ‘Bar’
![Page 13: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/13.jpg)
…Don’t think schema too hard…
![Page 14: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/14.jpg)
Over engineered?
![Page 15: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/15.jpg)
Hexagonal, Onion?
![Page 16: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/16.jpg)
ConcreteApplication?
![Page 17: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/17.jpg)
I misunderstood
“Architecture is about an intent, it’s not about a technical framework”
Fail
![Page 18: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/18.jpg)
![Page 19: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/19.jpg)
Node
![Page 20: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/20.jpg)
So, what is
![Page 21: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/21.jpg)
Responsive
![Page 22: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/22.jpg)
Cross Media
![Page 23: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/23.jpg)
Patterns of ModernWeb Applications
![Page 24: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/24.jpg)
SPA*
*Single page application(ie : gmail)
![Page 25: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/25.jpg)
SPA
![Page 26: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/26.jpg)
SPAA
![Page 27: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/27.jpg)
REST
“Your API Is your APP”
![Page 28: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/28.jpg)
REST
![Page 29: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/29.jpg)
Tools!(for what?)
![Page 30: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/30.jpg)
Get the shell back!
![Page 31: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/31.jpg)
CurlEverything you need to test your app is here!
-X [GET|POST…]-I (include headers)-d key=value
![Page 32: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/32.jpg)
NugetPackage management is essential
Enterprise grade => build your own
Quite multi-platform
![Page 33: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/33.jpg)
Nuget curl http://nuget.org/nuget.exe -L -k -o nuget.exe
#!/bin/shPATH=/usr/local/bin:$PATHmono --runtime=v4.0 /usr/local/bin/NuGet.exe $*
(for Mac lovers)
![Page 34: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/34.jpg)
Chocolatey@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('http://bit.ly/psChocInstall'))" && SET PATH=%PATH%;%systemdrive%\chocolatey\bin
(nuget powered)
> Cinst ruby
![Page 35: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/35.jpg)
See what append
(live)
![Page 36: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/36.jpg)
![Page 37: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/37.jpg)
Chrome dev tools
![Page 38: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/38.jpg)
Editors
Chose a good tool also for the client side!
Webstorm
![Page 39: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/39.jpg)
Online web editors
C9.io
Jsfiddle.com Jsbin.net Plnkr.co Codepen.io
![Page 40: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/40.jpg)
Frameworks!
![Page 41: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/41.jpg)
Frameworks ?
![Page 42: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/42.jpg)
Frameworks ?
![Page 43: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/43.jpg)
OSS ?oss projects -most of the time-
fits real user needs
tiny oss projects usually fit one need, but do it well.
![Page 44: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/44.jpg)
jQuery
![Page 45: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/45.jpg)
jQuery
![Page 46: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/46.jpg)
Angular
Html enhanced for web apps!
![Page 47: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/47.jpg)
Angular
![Page 48: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/48.jpg)
![Page 49: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/49.jpg)
Less css
dotLess for .Net
![Page 50: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/50.jpg)
Nancy fx
![Page 51: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/51.jpg)
RavenDB
![Page 52: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/52.jpg)
Simple.Data
![Page 53: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/53.jpg)
SignalR
(Socket.io like framework for .Net)
![Page 54: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/54.jpg)
So what?
![Page 55: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/55.jpg)
“if you don’t love it, it gonna fail!”
“stay foolish, stay hungry”
Jobs
![Page 56: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/56.jpg)
Get more Fun
![Page 57: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/57.jpg)
Please rate this sessionScan the code, go online, rate this session
![Page 58: Simplicity - develop modern web apps with tiny frameworks and tools](https://reader030.fdocuments.in/reader030/viewer/2022013118/554f8d1fb4c905435d8b4e71/html5/thumbnails/58.jpg)
All sketches are by me – with the help of the fabulous iPad application
Paper by 53 – and can be reused under The creative commons licence