Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular js best practice
Search
Matteo
October 20, 2015
Technology
2
69
Angular js best practice
Slide from the talk: "Angular js best practice - for Enterprise development and distributed Teams"
Matteo
October 20, 2015
Tweet
Share
Other Decks in Technology
See All in Technology
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
プロセス改善による品質向上事例
tomasagi
1
1.6k
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
The Invisible Side of Design
smashingmag
299
50k
Bash Introduction
62gerente
610
210k
Typedesign – Prime Four
hannesfritz
40
2.5k
For a Future-Friendly Web
brad_frost
176
9.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Transcript
AngularJs Best Practice for Enterprise development and distributed Teams #angularconf15
Matteo Scandolo FE Developer Team Leader Code Quality and Maintainability
@_teone
Enterprise? for Enterprise development … big complex fluid teams multiple
developers system integrations
Distributed? … distributed Teams communication delays
10 rules to improve your Angular project #angularconf15
#1 Planning - Constraints - Technical Choices - Application Architecture
- Modules - Shared Method - Dependencies - Guidelines - Tooling
Immagine dello schema di un progetto
Npm Scripts
#2 Setup README.md - Dev Environment - Deploy - Tests
- Styleguide* - Environment Configurations* - Documentation* - Contributors*
#3 Styleguide Force devs to write similar code - Js
styleguide - Air Bnb - Angular Styleguide - Jhon Papa with a styleguide with no styleguide Dev Speed
ES Lint Pluggable linting utility - Configurable (Json, Yml) -
Pluggable (as npm packages) - Extendable - custom rules - yeoman generator
ES Lint
ES Lint
Force
#4 Tests Why are they so important? - Prevent regressions
- Reduce Bugs - Code enhancement - Document features
Karma + Jasmine Karma - Test Runner Jasmine - Assetion
Library PhantomJs - Headless browser
The Old Way...
The Clean Way
#5 Documentation Not talking about high-level documentation Technical Docs -
List all available methods - Teach how to use them - Specify parameter type - Provide Examples - Can do more?
REST API Build a representation of your restfull API -
Interactive documentation - Client SDK generation
REST API
REST API
REST API
REST API Can generate ngResouces automatically! - signalfx/swagger-angular-client - swagger-api/swagger-codegen
NG DOC ngDoc - Extend jsDoc - Browsable Documentation -
Describe the app API - Provide usage examples
NG DOC What can we describe: - Docs template (@ngdoc)
- Name - Belongings (@methodOf) - Description - Params - Return - Angular Specific Attribute - @restrict
NG DOC
PARAMETER TYPES...
#6 Code Quality Automate Code Quality Check - Dependencies Status
- Duplicated Code - Complex Function - Error Handling - Lint Status - Test Coverage
BITHOUND.IO Software insight as a service Free for OS project
BITHOUND.IO
BITHOUND.IO
KARMA COVERAGE Karma Coverage Plugin - Easy to set up
- Generate different format
Usage
#7 Continuous Integration Why? - Automate the process - Error
reduction - Generate reports - 1 click (or no-click deploy)
Tools Travis CI Jenkins CI Strider CD
Tools
#8 Development Workflow Git Flow - Stable branch with released
version - Stable branch with new features - Shared Standard
How dows it work... GIT FLOW: https://www.atlassian.com/git/tutorials/comparing- workflows/gitflow-workflow Master Develop
Feature Branch Release Branch HotFix Branch
Tools...
#9 Team Communication SLACK - Issues - Snippets - Usefull
Link - Dependencies Docs - Real Time Notification
Tools...
#10 Ask yourself.. If I leave tomorrow… … and someone
have to work on this project … Will I like to be that guy?
Thanks! @_teone #angularconf15