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
![Page 1: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/1.jpg)
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
![Page 2: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/2.jpg)
What’s on the plate
ConceptsDevelopment
FlowLanguagesFrameworks &
toolsPerformance
tuningSocial APIsKnowledge Bases
![Page 3: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/3.jpg)
Why bother ?Creative satisfactionAbundant scope for innovationWide audienceUser delightTime to marketHandling peak load
![Page 4: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/4.jpg)
Designing for a fragmented worldBrowsersDevicesOSResolutionPitchAspect RatioOrientationBandwidth
1024 x 768800 x 600
1920 x 10801366 x 7201280 x 1024
4:3 16:9 Retina display
![Page 5: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/5.jpg)
Aspects of developmentIndustry standards & best
practicesDesign patterns
◦Flyout menus, auto-suggest box◦Infinite list, carousel, flat UI
InternationalizationLocalizationSecurity
![Page 6: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/6.jpg)
Languages
Browser coding Server coding
JSP (Java + EL + JSTL)
JSF
XML + XSL
![Page 7: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/7.jpg)
Development flow
Wireframe
Sketch
Graphic Design
Mock
Working prototype
End product
Architecture
![Page 8: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/8.jpg)
Left Brain ConceptsData-driven, OO, MVCGraceful degradationProgressive enhancementBrowser detectionFeature detectionFluid layoutsMobile first
![Page 9: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/9.jpg)
Right Brain ConceptsSimplicityIntuitivenessUsabilityConsistencyAestheticsResponsiveness
![Page 10: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/10.jpg)
Frameworks – 1
JS onlyCSS only
JS + CSS
![Page 11: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/11.jpg)
Frameworks - 2Why do we need frameworks ?How to choose the right mix ?LicensingSecuritySupport
![Page 12: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/12.jpg)
Online ToolsPixlr ExpressCodepen
![Page 13: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/13.jpg)
PerformanceWhy performance mattersFactors affecting performanceProfilingPerformance improvement
◦Reducing HTTP requests◦Caching◦Content server
![Page 14: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/14.jpg)
Web APIsFacebook APITwitter APIGoogle Maps API
![Page 15: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/15.jpg)
Knowledge Bases
![Page 16: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/16.jpg)
Stay up to dateFollow design trendsFollow draft specificationsLook out for new frameworksHone your skills through practiceStandards compliant coding
![Page 17: Front-end Engineering Concepts](https://reader036.vdocuments.mx/reader036/viewer/2022062405/556261e8d8b42ae87d8b4cea/html5/thumbnails/17.jpg)
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]