Prototyping app using JS and HTML5 (Ciklum Kharkiv)Presentation Transcript
About usYuriy V. Silvestrov10+ years record in IT, 8+ years devoted to managingprojects. Now working for Ciklum, managing a teamof 30+ persons making different software for Danishfinancial organizations.Twitter: @ysilvestrovPlease visit my websitehttp://yuriy.silvestrov.comfor more info or contact me email@example.com.
About usMikhail Valkov10+ years record in IT. 2+ years devoted to systemarchitecture. Now working for Ciklum.for more info contact me firstname.lastname@example.org.
Based on our own About lection experience Useful for startups and pet projects Divide and conquer
⌛ < 60Time is counting
Alarm clocks with skinning and time synchronization See on BitBucket: ◦ http://bitbucket.org/ysilvestrov/alarm-clock See online demo: ◦ http://jayostudio.net/app/Demo application
Plans Reality Write an app in max. Spent 24h 4h Code is too complex Rewrite JS code right to rewrite fast at the demo Due to extra Show the code on complexity, we’re just screen to show some fragments; see the rest at BitBucketPlans VS Reality
What is startup? Act like startup! Implement main idea only Throw away everything elseStartup mode ON
Lack of resources Fast show results If to fail at all – fail fast!Why quick prototyping?
Choose platform Download seed for chosen platform Quick UI Choose vital functionality to prototype Find the frameworks/solutions realizing the functionality Compose all together … PROFITHow to prototype
Use 3-rd party components Existing online services ◦ Prefer ones implementing REST interface Use dependency managers to integrateComponent development
85% of WebApps made with jQuery Pros ◦ Modularity ◦ Speed ◦ Small footprint ◦ Json Visit http://jquery.com/ for more detailsjQuery and plugins
One of 20+ MVC JS frameworks Supported by Google Integrated ◦ Templates ◦ Directives and filters ◦ Module systems ◦ Resources ◦ Asynchronous programmingVisit http://angularjs.org for detailsAngular JS
Dependency isolation Dependency management Modules cashingVisit http://requirejs.org/ for detailsRequireJS
AMD = Advanced Module Definition CommonJSSee https://github.com/amdjs/amdjs-apiModules and AMD
Use advanced CSS and JS Throw away old browsers Build one version of web app for all the devices Responsive design and mobile firstDesign tips
Twitter bootstrap http://twitter.github.com/bootstrap/ ◦ Made for everyone ◦ Packed with featuresBootstrap usage
Using media queries Mobile firstResponsive design