front-end engineering concepts
DESCRIPTION
The presentation discusses various aspects and concepts of front-end engineering, with a view to encourage the audience to take up front-end-developmentTRANSCRIPT
Front-End Engineering
Sameer P KarveApplications Developer
Oracle Financial Services Software Ltd
Presented at the Thakur College of Engineering & Technology (TCET),
Mumbai, INDIA
on 4th February 2014
Duration : 60 mins
What’s on the plate
ConceptsDevelopment
FlowLanguagesFrameworks &
toolsPerformance
tuningSocial APIsKnowledge Bases
Why bother ?Creative satisfactionAbundant scope for innovationWide audienceUser delightTime to marketHandling peak load
Designing for a fragmented worldBrowsersDevicesOSResolutionPitchAspect RatioOrientationBandwidth
1024 x 768800 x 600
1920 x 10801366 x 7201280 x 1024
4:3 16:9 Retina display
Aspects of developmentIndustry standards & best
practicesDesign patterns
◦Flyout menus, auto-suggest box◦Infinite list, carousel, flat UI
InternationalizationLocalizationSecurity
Languages
Browser coding Server coding
JSP (Java + EL + JSTL)
JSF
XML + XSL
Development flow
Wireframe
Sketch
Graphic Design
Mock
Working prototype
End product
Architecture
Left Brain ConceptsData-driven, OO, MVCGraceful degradationProgressive enhancementBrowser detectionFeature detectionFluid layoutsMobile first
Right Brain ConceptsSimplicityIntuitivenessUsabilityConsistencyAestheticsResponsiveness
Frameworks – 1
JS onlyCSS only
JS + CSS
Frameworks - 2Why do we need frameworks ?How to choose the right mix ?LicensingSecuritySupport
Online ToolsPixlr ExpressCodepen
PerformanceWhy performance mattersFactors affecting performanceProfilingPerformance improvement
◦Reducing HTTP requests◦Caching◦Content server
Web APIsFacebook APITwitter APIGoogle Maps API
Knowledge Bases
Stay up to dateFollow design trendsFollow draft specificationsLook out for new frameworksHone your skills through practiceStandards compliant coding
How to take this further ?1. View this presentation again
.net/sameerpkarve
2. Find useful links here
.com/bundles/o_jcsmir7qh/n
3. Research on your own
4. Contact [email protected]